0

我正在尝试使用 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>

任何帮助将不胜感激！

编辑：我已经通过使用表格解决了这个问题。感谢您的回复。

4

1 回答 1

0

更新 2

您的问题是：如何使价格和航班号 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 步）将在中间很好地对齐价格和航班号。

老的

<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 的自动高度更容易。我还添加了飞行的腿部图像，但正如我所提到的，你必须自己做剩下的；）

于 2012-05-04T11:57:11.197 回答