我該如何定位多個div並排？

我有幾個div的包含浮動圖像和無序列表。我希望將這兩種方式並排放置在頁面中。我該如何定位多個div並排？

問題是，隨着div向下翻頁，整個事情就崩潰了。右側的圖像開始越來越低，列表項越來越高。這是我做的。

.imageleft { 
    float: left; 
    margin-left: 0; 
    margin-top: 0; 
} 

.container-right { 
display:inline; 
    padding-bottom: 10px; 
    width: 500px; 

} 

.container-left { 

    float:left; 
    padding-bottom: 10px; 
    width: 500px; 

} 


    <div class="inline"> 
     <div class="container-left"> 
      <img alt="Image info" class="imageleft" src="someimage.png" /> 
      <h3> 
       Title</h3> 
      <ul> 
       Sub title: 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
      </ul> 
     </div> 
     <div class="container-right"> 
      <img alt="Blah blah" class="imageleft" src="/another-image.png" /> 
      <h3> 
       Title</h3> 
      <ul> 
       Sub heading 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
      </ul> 
     </div> 
    </div>

我嘗試添加周圍的2 div個div但它似乎並沒有幫助。我怎樣才能防止這種不需要的行爲？

感謝您的任何提示！

來源

2011-03-22 Alison

你的意思是這樣http://jsfiddle.net/efVjj/

來源

2011-03-22 19:26:51 Hussein

你真的只需要.imageleft類。適用於兩個divs，你就設置好了。

下面的代碼（我加了邊框勾勒的div）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style> 
.imageleft { 
    float: left; 
    margin-left: 0; 
    margin-top: 0; 
    border:1px solid #000; 
} 
</style> 
<title>Untitled Document</title> 
</head> 
<div class="imageleft"> 
<img alt="Image info" class="imageleft" src="someimage.png" /> 
      <h3> 
       Title</h3> 
      <ul> 
       Sub title: 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
      </ul> 

</div> 
<div class="imageleft"> 
<img alt="Blah blah" class="imageleft" src="/another-image.png" /> 
      <h3> 
       Title</h3> 
      <ul> 
       Sub heading 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
       <li> 
        List item</li> 
      </ul> 

</div> 
<body> 
</body> 
</html>

來源

2011-03-22 19:41:27 tahdhaze09

我該如何定位多個div並排？

回答

相關問題