Question

我试图这样做http://prntscr.com/cdbzsu但看起来我对css float不太好:(。

我试图查看其他教程，但我仍然无法做到。

请有人帮忙。

这是我到目前为止所做的。

.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标记之后，我认为您可以从此处向前移动它。干杯！

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

Answer 2

我有一个更简单的解决方案，让它看起来你在该图像上的描绘（减去红色写作）。为你自己提供一个codepen。

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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

CSS float ul列表和段落

2 个答案: