1

CSS を使用して DIV を適切に配置するのに問題があります。どんな助けでも信じられないほど高く評価されます!

問題: http://teamcoding.ca/leisure/specialevent/サイトでは、このサイトを使用して行われるように、高さに関係なく、「イベント」div をそれぞれの上に重ねて配置したいと考えています: http://themify. me/demo/#theme=grido私のサイトのレンダリング方法では、高さが最も高い DIV が他のすべての DIV を押し下げます。たとえば、3 列に拡張する場合、div #5 は div #1 の下にある必要があります。

JS Fiddle: http://jsfiddle.net/QQFpD/4/ これが私のコードです。メッセージ ボックスではなく、JsFiddle に投稿する方が簡単だと思いました。(ここにもコードを投稿する必要があるかどうかをお知らせください。)

4

2 に答える 2

2

それはフロートの性質です。例のページ (themify) も要素をごちゃまぜにしていますが (float の性質)、どうにかギャップを埋めることができます。よく調べてみると、DOM が新しい位置の絶対値、上位値に更新されるため、ブラウザとウィンドウ幅の調整の間に動的な相互作用があることがわかります。ソリューションは、静的 CSS ではなく、jQuery にある必要があります。

于 2012-06-10T19:55:00.370 に答える
1

あなたの問題は、フロートの性質の上で指摘されたとおりです。列に関してイベントを配置する方法を再考する必要があります。これを処理し、フロートを使用してレイアウトを流動的に保つ良い方法は、次のようなグリッドを作成することです。

/* __row
 * A row of columns, we define total page width here */
.row        {width:960px; height:100%; margin: 0 auto; position:relative;}

/* __grid 
 * Master Grid Layout elements */

.col1, .col2, .col3, .col4, .col5, .col6 {
    position:relative;
    height:100%;
    float:left;
    margin-left: 2%;
}

パーセンテージを使用すると、全体の幅を変更したり、.row列を合わせて拡大したりできます。

.col1       {width: 15%;}
.col2       {width: 32%;}
.col3       {width: 49%;}
.col4       {width: 66%;}
.col5       {width: 83%;}
.col6       {width: 100%; margin-left:0;}
.colFirst   {margin-left:0;}
.colClear   {clear:both;}

これを使用して 3 列の流動的なレイアウトを作成します。

<div class="row"> 
    <div class="col2 colFirst">
        <ul>
             <li>1st item</li>
             <li>2nd item</li>
        </ul>
    </div>
    <div class="col2">... second column div's / data</div>
    <div class="col2">... third column div's / data</div>
    <div class="colClear></div>
</div>

このようにして、データはすべて列に分類され、純粋な CSS で表示したい正確な方法でページをシームレスに流れます。

于 2012-06-10T21:08:50.360 に答える