0

CSS を使用して複雑な div 構造を作成しようとしています。

4列で構成したい。左側は画像のリストです。右側は複雑な div 構造で、作成方法がわかりません。さまざまな詳細を含む 2 つの大きな垂直ボックスがあるはずです。これらの垂直ボックスの間には、任意の数の水平ボックスがあります。

私の問題は、この div 構造を「スケーリング」する方法で作成する方法がわからないことです。つまり、2 つの垂直ボックスの間に任意の数の水平ボックスが存在する可能性があります。

これは私が使用しようとしていた 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

あなたの質問は次のとおりです: price & 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) により、価格とフライト番号が適切に中央に配置されます。

年

<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 の自動高さを使用すると簡単になるため、すべての絶対位置を float に変更しました。フライトの脚の画像も追加しましたが、前述したように、残りは自分で行う必要があります;)

于 2012-05-04T11:57:11.197 に答える