Question

由于某些原因，除非我使用clear标签，否则text1会转到下一列而不是图像下面。使用clear标签的问题是我无法在text1之前的clear标签前面添加text2，这就是为什么你会在段落之前看到一个大空格。

此外，text-align不会在页面上居中显示文本。它以文本为中心。我该如何解决这个问题？

Jsfiddle - https://jsfiddle.net/p6eocccj/

HTML

<div id="div1">
<p id="text0"><span id="sp1pg4">About me</span></p>
<img id="img1" src ="images/hack.jpg"/>
<br>
<p id="text1"><strong>Image Courtesy Homer Simpson</strong><br></br>
<a href="www.google.com">www.homersimpsoniscooltoo.com</a></p>
<p id="text2">
Hi there!
<br></br>
I'm bob, a coool designer and developer<br>
from Far far coolioland, Australia. I<br>
specialise in cooking, shipping, shopping,<br>
camping and turning coffee into popcorn. My<br>
approach to buytying is this, make it clean and<br>
simple but also focus on the buying for men. This<br>
is what differentiates poor people from great chimps.<br>
Whether you want to build a house for as long as<br>
business, a personal toy or just ask you some<br>
</p>
</div>

CSS

#div1 {
width: max-width;
height: 1650px;
background-color: #ECECEC;
}

#text0 {
text-align: left;
padding-top: 25px;
padding-left:150px;
}

#img1 {
float:left;
margin-top: 25px;
margin-left:150px;
width: 220px;
height: 220px;
border-radius: 50%;
}

#text1 {
clear:left;
float:left;
padding-left:160px;
font-size:13px;
line-height:80%;
}

#text2 {
padding-top: 100px;
line-height: 140%;
text-align: center;
font-family: sans-serif;
font-size: 15px;
}

Answer 1

因为您向图像标记添加浮动。删除图像上的浮动或向文本元素添加清除

Answer 2

因为当您将float规则应用于任何元素时，该元素不是普通文档流的一部分，它将围绕它包装文本。删除float或使用clearfix黑客。

这是clearfix hack -

.clearfix::after {
  display: table;
  content: '';
  clear: both;
}

P.S：我刚从图片中删除了float: left。如果您想使用hack，请将clearfix类应用于图像的父级。

＆＃13;

#div1 {
      width: max-width;
      height: 1650px;
      background-color: #ECECEC;
}

#text0 {
	text-align: left;
	padding-top: 25px;
	padding-left:150px;
}

#img1 {
	margin-top: 25px;
	margin-left:150px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
}

#text1 {
    clear:left;
		float:left;
		padding-left:160px;
		font-size:13px;
		line-height:80%;
}

#text2 {
	  padding-top: 100px;
	  line-height: 140%;
    text-align: center;
    font-family: sans-serif;
    font-size: 15px;
}

＆＃13;

<div id="div1">
<p id="text0"><span id="sp1pg4">About me</span></p>
<img id="img1" src ="images/hack.jpg"/>
<br>
<p id="text1"><strong>Image Courtesy Homer Simpson</strong><br></br>
<a href="www.google.com">www.homersimpsoniscooltoo.com</a></p>
<p id="text2">
Hi there!
<br></br>
I'm bob, a coool designer and developer<br>
from Far far coolioland, Australia. I<br>
specialise in cooking, shipping, shopping,<br>
camping and turning coffee into popcorn. My<br>
approach to buytying is this, make it clean and<br>
simple but also focus on the buying for men. This<br>
is what differentiates poor people from great chimps.<br>
Whether you want to build a house for as long as<br>
business, a personal toy or just ask you some<br>
</p>
</div>

＆＃13;

如果没有明确的标记和文本对齐中心在内容周围而不是页面，则无法在图像下添加文本

2 个答案: