CSS float ul 列表和段落

Question

我尝试这样做 http://prntscr.com/cdbzsu 但看起来我对 css 浮点数不是很好 :(。

我试过看别人的教程，但还是不行。

请有人帮忙。

这是我目前所做的。

.edit-text {
  font-size: 13px;
}
.edit-text p {
  width: 100%;
}
.edit-text ul {
  float: left;
}
.edit-text ul li {
  list-style: circle inside;
}
.edit-text img {
  float: right;
  width: 102px;
  height: 130px;
}
.edit-text a {
  clear: both;
  background-color: #002B0F;
  color: #FFFFFF;
  padding: 3px 15px;
}

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <div class="edit-text">
  <p>Vous-voulez nous consulter pour vous aider à réviser votre vitrine commerciale?</p>
  <p>Ce service inclut: </p>
  <ul>
   <li>La révision</li>
   <li>La mise en page de la vitrine commerciale</li>
   <li>La correction et l’adaptation de mots clés pour le SEO</li>
   <li>Service payant</li>
  </ul>
  <a href="#" title="Click here">Cliquez ici pour envoyer la demande de consultation</a>
  <img src="http://www.holidaymood.com/images/ContactGirl.png" alt="Image">
 </div>
</body>
</html>

Answer 1

将 img 移到 green 文本上方并使用以下方法清除浮动：

<div style="clear:both;"></div>

在 img 标记之后，我认为您可以从这里向前移动它。干杯！

.edit-text {
  font-size: 13px;
}
.edit-text p {
  width: 100%;
}
.edit-text ul {
  float: left;
}
.edit-text ul li {
  list-style: circle inside;
}
.edit-text img {
  float: right;
  width: 102px;
  height: 130px;
}
.edit-text a {
  clear: both;
  background-color: #002B0F;
  color: #FFFFFF;
  padding: 3px 15px;
}

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <div class="edit-text">
  <p>Vous-voulez nous consulter pour vous aider à réviser votre vitrine commerciale?</p>
  <p>Ce service inclut: </p>
  <ul>
   <li>La révision</li>
   <li>La mise en page de la vitrine commerciale</li>
   <li>La correction et l’adaptation de mots clés pour le SEO</li>
   <li>Service payant</li>
  </ul>
  <img src="http://www.holidaymood.com/images/ContactGirl.png" alt="Image">
        <div style="clear:both;"></div>
  <a href="#" title="Click here">Cliquez ici pour envoyer la demande de consultation</a>

 </div>
</body>
</html>

Answer 2

我有一个更简单的解决方案，可以让它看起来完全像您在该图像上描绘的那样（减去红色文字）。冒昧的给大家提供一个codepen

http://codepen.io/Ballard/pen/ambGQA

虽然 Kukkuz 的回答似乎解决了你想做的事情，但它涉及在 HTML 中准确指定样式，而不是在你的 CSS sheet 上使用它，你尝试正确对齐图像和可点击的 link 也会遇到问题。看看我下面的代码片段，以获得更简单更好的解决方案。

.edit-text {
  font-size: 13px;
  width: 490px;
  background-image: url(http://www.holidaymood.com/images/ContactGirl.png);
  background-repeat: no-repeat;
  background-position: 350px 40px;
  background-size: 100px 115px;
}
.edit-text p {
  width: 100%;
  margin: 0 auto;
}

.edit-text ul li {
  list-style: circle inside;
}
.edit-text a {
  background-color: #002B0F;
  color: #FFFFFF;
  padding: 3px 15px;
}

<div class="edit-text">
  <p>Vous-voulez nous consulter pour vous aider à réviser votre vitrine commerciale?</p>
  <p>Ce service inclut: </p>
  <ul>
   <li>La révision</li>
   <li>La mise en page de la vitrine commerciale</li>
   <li>La correction et l’adaptation de mots clés pour le SEO</li>
   <li>Service payant</li>
  </ul>
  <a href="#" title="Click here">Cliquez ici pour envoyer la demande de consultation</a>
 </div>

CSS float ul 列表和段落

CSS float ul lists and paragraphs

html

css

image

list

css-float