Question

我正在创建一个包含3列的网页。中间栏是所有内容的所在。我想要输入的内容必须采用左对齐图像的格式，然后是图像旁边的一些文本。并且这在整个列中流动，具有不同的图像和相应的文本。由于我的布局是基于div的布局，因此我为列添加了一个主div（page_content）。然后标题（h4）和标题I下方输入了另一个div。这个div反过来包含嵌套div的div（类照片）和文本的div（class 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'。无论如何你描述了你有三列，但如果我理解正确，它只是你要问的中间一列。

您想要这种格式：

图片左侧
图片右侧有标题
在标题下，您有很多文字包围图片

正确？

你的问题是你浮动，但是你没有清除浮动。这意味着其下的所有内容将根据图片进行对齐。你需要的是设置清楚：在你不希望内容再包装之后。

我写了一个小例子并测试了它。 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>

Answer 2

使用雅虎的YUI Grids CSS，你可以节省大量的时间和精力！

Answer 3

我不是100％确定我理解这个问题。如果你真的想要你所谓的个人divs 在左边有一张图片而在右边有文字，你可以通过漂浮两者照片和 lat_art div 左。如果您确实希望文本在右侧，并且如果文本更长，则在图片下方流动，请不要将'lat_art'完全浮动。

无需在个别div 上指定高度，或清除它们上的浮动，因为默认情况下它们会低于另一个（div是块）。

你也是这里的分裂的受害者 - <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>

在父div中浮动2 div并将这些div排列在另一个之下

HTML代码

来自外部样式表的代码

3 个答案: