在父級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

確實很難遵循，因為您所描述的每個其他詞都是'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

您可以使用Yahoo!的YUI Grids CSS節省大量時間和精力。

Answer 3

我不確定100％是否理解這個問題。 如果你真正想要的，你在呼喚個人的div有左邊和文本右邊的圖片，你可以通過浮動既照片和lat_art DIV 左做到這一點。 如果你真的希望文本在右邊和圖片下方流動，如果它是更長的時間，不浮動的“lat_art” 可言 。

無需在各個div上指定高度，也無需清除其上的浮點數，因為默認情況下它們將比另一個浮點數低（div是塊）。

您也是這里的三叉戟的受害者- <span class="artist">ROCK ON</span>可能更有意義，例如<h5 class="artist">ROCK ON</h5>或一段<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>