將幾個div對齊

有沒有辦法讓我把4個div對齊起來，這樣他們都整齊地內聯，我有一個div的圖像，另一個圖像的header，文本和其他單獨的div的另一個圖像，但是我希望它們大家看起來一致。見fiddle 將幾個div對齊

<div id="christmas_product_boxes"> 
    <div id="christmas_mattress"> 
     <img src="http://blog.applause.com/wp-content/uploads/2013/05/one_star.jpg" height="100px" width="100px"> 
    </div> 
    <div id="christmas_pillows"> 
     <img src="http://blog.applause.com/wp-content/uploads/2013/05/one_star.jpg" height="100px" width="100px"> 
    </div> 
    <div id="christmas_beds"> 
     <img src="http://blog.applause.com/wp-content/uploads/2013/05/one_star.jpg" height="100px" width="100px"> 
    </div> 
</div> 
<br> 
<br> 
<div id="christmas_product_boxes_title"> 
    <div id="christmas_mattress_title"> 
     <h2>Title 1</h2> 
    </div> 
    <div id="christmas_pillow_title"> 
     <h2>Title 2</h2> 
    </div> 
    <div id="christmas_beds_title"> 
     <h2>Title 3</h2> 
    </div> 
</div> 
<div id="christmas_product_boxes_text"> 
    <div id="christmas_mattress_text"> 
     <p>This is some text in a p tag!! <br>This is some text in a p tag!! <br>This is some text in a p tag!!</p> 
    </div> 
    <div id="christmas_pillow_text"> 
     <p>This is some text in a p tag!! <br>This is some text in a p tag!! <br>This is some text in a p tag!!</p> 
    </div> 
    <div id="christmas_beds_text"> 
     <p>This is some text in a p tag!! <br>This is some text in a p tag!! <br>This is some text in a p tag!!</p> 
    </div> 
</div> 
<div id="christmas_product_boxes_buttons"> 
    <div id="christmas_mattress_button"> 
     <a href="#"><img src="http://www.downloadclipart.net/large/253-button-blue-design.png" height="30px" width="30px"></a> 
    </div> 
    <div id="christmas_pillow_button"> 
     <a href="#"><img src="http://www.downloadclipart.net/large/253-button-blue-design.png" height="30px" width="30px"></a> 
    </div> 
    <div id="christmas_beds_button"> 
     <a href="#"><img src="http://www.downloadclipart.net/large/253-button-blue-design.png" height="30px" width="30px"></a> 
    </div> 
</div>

來源

2013-10-31 Karina McGourty

以何種方式保持一致？你想如何安排他們？ – Guffa

怎麼是這樣的：

小提琴：http://jsfiddle.net/6Lrdp/1/

應用這些樣式，大多數集裝箱按小提琴。

width: 130px; 
margin:0 10px 0 50px 
text-align: center;

您將不得不亂搞維度。。。

來源

2013-10-31 13:27:12

一個好的開始是改變你創建html結構的方式。您正在嘗試水平組織內容。你是div將你的「感興趣的對象」（盒子，在這種情況下）分成許多部分。我不是說這是錯的，但它看起來很奇怪（至少對我而言）。

「水平路」：http://jsfiddle.net/felipemiosso/yUgLw/3/

現在，你看這個：http://jsfiddle.net/felipemiosso/yUgLw/2/

它不是更簡單，更容易看到比其他的方式？無論如何...你提供給你一個北方的提琴，你需要改變你的代碼正常工作。希望它有幫助:)

只是關於你的代碼的一個說明：你不應該在你的代碼中重複id屬性。 Difference between div id and div class

來源

2013-10-31 13:50:44

將幾個div對齊

回答

相關問題