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

您的问题是：如何制作价格＆amp; flight_number div与父div（容器）的高度相同..

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

2）更新您的CSS，使航班号和价格在div的中间垂直对齐。

我认为我的HTML结构比你的更好，因为它更清晰，更容易使用。

所以基于我的HTML结构：只要内部的内容（具有行的表将是最长的），父容器（flight_info）就是拉伸。由于上面步骤1中描述的技术，div的flight_number和price也是父容器的总高度。额外的CSS（步骤2）将在中间很好地调整价格和航班号。

OLD

<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的自动高度。我还添加了飞行的腿部图像，但正如我所提到的，你必须自己做其余的事情;）

使用CSS创建复杂的div结构

1 个答案:

更新2

OLD

编辑1