0

我正在创建一个包含 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; 
}
4

3 回答 3

1

这真的很难理解，因为你描述的每一个词都是“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>
于 2009-02-20T13:38:56.953 回答
0

通过使用Yahoo!的YUI Grids CSS ，您可能会为自己节省大量时间和精力。

于 2009-02-20T13:43:20.920 回答
0

我不是 100% 确定我理解这个问题。如果您确实希望您所称的单个 div在左侧有图片，在右侧有文本，您可以通过将 photo 和lat_art div left浮动来完成此操作。如果您确实希望文本在右侧并在图片较长时在图片下方流动，则根本不要浮动“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>
于 2009-02-20T15:57:40.410 回答