使用CSS創建復雜的div結構

Question

我正在嘗試使用CSS創建一個復雜的div結構。

我希望它由四列組成。 左側只是圖像列表。 右邊是復雜的div結構，我想不出一種創建方法。 應該有兩個包含各種細節的大垂直框。 在這些垂直框之間是任意數量的水平框。

我的問題是我無法解決如何以“縮放”方式創建此div結構的方法，即兩個垂直框之間可以有任意數量的水平框。

這是我嘗試使用的div結構：

<div class="result">
    <div class="detail_1">
        <p>Detail 1</p>
    </div>
    <div class="details">
        <p>Details</p>
    </div>
    <div class="details">
        <p>Details</p>
    </div>
    <div class="detail_2">
        <p>Detail 2</p>
    </div>
</div>

任何幫助將不勝感激！

編輯：我已經通過使用表格解決了這個問題。 感謝您的答復。

Answer 1

更新2

您的問題是：如何使price＆flight_number div與父div（容器）的高度相同。

1）使用此處描述的技術： http : //matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

2）更新CSS，以使航班號和價格在其div的中間垂直對齊。

我認為我的HTML結構比您的HTML結構更好，因為它更清晰，更易於使用。

因此，基於我的HTML結構：父容器（flight_info）處於伸展狀態，只要其中的內容（帶有行的表最長）即可。 由於上述步驟1中所述的技術，div的flight_number和price也是父容器的總高度。 額外的CSS（第2步）將在中間很好地調整價格和航班號。

舊

<ul id="flights">

<li>
<ul class="images">
    <li><img src="img1" alt="your image" /></li>
    <li><img src="img2" alt="your image 2" /></li>
</ul>

<div class="flight_info" id="flight_EK49">
    <div class="flight_number">
        EK49
    </div>  

    <table>
       <thead>
           <th>date</th>
           <th>from</th>
           <th>to</th>
       </thead>
       <tbody>
        <tr>
            <td>1/1/2013</td>
            <td>departure airfield</td>
            <td>destination airfield</td>
        </tr>
        ...
       </tbody>
    </table>

   <div class="price">
    €999,99
   </div>
</div>
</li>

// duplicate the above for a new flight..
</ul>

對於CSS樣式（您必須自己完成其余工作，因為這只是一個示例。我沒有測試任何代碼）：

<style>
    #flights .images {
       float: left;
       width: 250px;
    }

    .flight_info {
        float: left;
        width: 700px; 
    }

    .flight_info .flight_number,
    .flight_info  .price {
        float: left;
        width: 150px;
    }

    .flight_info  .price {
        float: right;
    }

    .flight_info table {
        float: left;
        width: 400px;
    }
</style>

我想你會明白的。

編輯1

將所有位置絕對值都更改為浮點數，因為使用li的自動高度更容易。 我還添加了飛行的腿部圖像，但是正如我提到的，您必須自己做剩下的事情;）