0

テーブル レイアウトを使用したデザインに問題があります。そのため、サイド ナビゲーションと中央のメイン セクション コンテンツ (セクション ラッパーですべてラップされている) に 2 つのサイドを使用しています。セクション ラッパーのテキストには、上部に白いスペースがあります。横要素の左右の浮きによるものです。それらを削除すると、テキストは上部に戻りますが、私の脇の要素はスペース全体を占有します (私は自分のデザインの脇の要素に色を付けたいので、それを表示するために脇の周りにボックスの境界線を使用しました。本体のスペース全体を使用したくない-コンテンツ)

top:0% を使用してみましたが、うまくいきません。

フィドル: http://jsfiddle.net/chou_one/nPAJc/

4

1 に答える 1

1

width と float を変更するだけで簡単に実行できます。

あなたのコードによると、私はいくつかの変更を加えました：

のフロートを#side-news2からrightに変更しましたleft。、、およびに追加width: 30%します。( + + ) のすべてが( に設定されている)内の 1 つを超えることはできないことに注意してください。#side-news#side-news2#section-wrapperwidth30%30%30%#body-content90%

#body-content {
    display: table;
    width:90%;     
    margin: 0 auto;
    background: lightblue;
    border-color: rgba(255, 255, 255, 0.7); /* highlight on inner box */
    border-width: 1px;
    border-style: solid;
    -moz-border-radius: 3px; /* FF */
    -webkit-border-radius: 3px; /* Safari, Chrome */
    border-radius: 3px; /* modern browsers */    
    -moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);    
}

#side-news {
    border:1px solid black;
    width:30%;
        top:0%;
    display:table-cell;    
    float:left;
    list-style:none;    
}

#side-news2 {
    border:1px solid black;
    width:30%;
    display:table-cell;    
    float:left;
    list-style:none;      
}
#section-wrapper {
    width:30%;
    display:table-cell;  
    margin: 0px;
    float:left;
    top:0%;
    margin-top:0%;
    border:1px solid black;
    margin-top:0%;
}

</p>

于 2012-07-24T03:22:17.387 に答える