css - 在父 div 中 float 2 个 div，并将这些 div 一个放在另一个下面

Question

我正在创建一个包含 3 列的网页。中间一栏是所有内容所在的位置。我要输入的内容必须采用左对齐图像的格式，然后是图像旁边的一些文本。这在不同的图像和相应的文本中贯穿整个专栏。由于我的布局是基于 div 的布局，因此我为该列放置了一个主 div (page_content)。然后标题 (h4) 和标题下方我输入了另一个 div。此 div 依次包含单独的 div，这些 div 嵌套有用于图像的 div(类照片)和用于文本的 div(类 lat_art)。下面给出了 HTML 代码和 CSS 代码。我的问题是第一个图像和文本出现，但随后在第一个文本下方垂直排列，即仅占据 div 的 50% 并向右浮动，将其相应文本推到其下方相同的 50% 空间中。我应该为单个 div 指定高度，可能图像比文本大。但如果我这样做，我的代码不会变成静态的。我希望它是动态的。请帮忙。

HTML代码

<div id="page_content"> 
<h4 class="center_cap">LATEST ARTISTS</h4> 
<!--Div for the content begins here--> 
<div> 
<!--Individual div begins here--> 
<div > 
<div class="photo"> 
<img src="Images/guitar.jpg" alt="guitar"/> 
</div> 
<div class="lat_art"> 
<span class="artist">ROCK ON</span> 
<p> 
Good news to all the fans of 'Rock On'. Concerts all around the world. 
</p> 
</div> 
</div> 
<!--Individual div ends here--> 

<!--Individual div begins here--> 
<div > 

<div class="photo"> 
<img src="Images/guitar.jpg" alt="guitar"/> 
</div> 

<div class="lat_art"> 
<span class="artist">ROCK ON</span> 
<p> 
Good news to all the fans of 'Rock On'. Concerts all around the world. 
</p> 
</div> 
</div> 
</div> 
<!--Div for the content ends here--> 
</div> 

来自外部样式表的代码

.photo{ 
width:48%; 
float:left; 
padding-left:2px; 
} 
.lat_art{ 
width:50%; 
float:right; 
} 

Answer 1

这真的很难理解，因为您描述的几乎每一个其他词都是“div”。无论如何你描述了你有三列，但如果我理解正确的话，它只是你问的中间一列。

你想要这种格式:

• 左边的图片
• 图片右侧有标题
• 在标题下你有很多环绕图片的文字

正确吗？

你的问题是你 float 了，但你没有清除 float 。这意味着它下面的所有内容将根据图片对齐。您需要的是设置 clear:both 在您不想让内容再换行之后。

我写了一个小例子并测试了它。 CSS 是内联的，使示例简短。

<div>
<img src="pircture.png" style="float:left;height:400px;width:400px" />
<h4>My header</h4>
<p> A little content</p>
<div style="clear:both"></div>
</div>