在父 div 中浮动 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

我不能 100% 确定我理解了这个问题。如果您确实希望您所称的 individual divs 在左侧有图片，在右侧有文字，您可以通过浮动 both 照片和 lat_art div 左。如果您确实希望文本在右侧并在图片较长时在图片下方流动，请不要浮动“lat_art”根本。

没有必要在单个 div 上指定高度，或者清除它们上的浮动，因为默认情况下它们会一个低于另一个（div 是块）。

你在这里也成了 divitis 的受害者 - <span class="artist">ROCK ON</span> 可能是更有意义的东西，如<h5 class="artist">ROCK ON</h5> 或段落或其他相应样式的东西。 img 也可以是：

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

而不是：

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

Answer 2

使用 Yahoo! 的 YUI Grids CSS 可能会为自己节省大量时间和烦恼！

Answer 3

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

你想要这种格式：

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

正确吗？

你的问题是你漂浮，但你没有清除浮动。这意味着它下面的所有内容将根据图片对齐。您需要设置 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>