1

メインとサイドの 2 つの div があり、どちらか長い方の長さを確保したいと考えています。

今のところメインがサイドより長いのですが、内容によってはどうすれば同じ高さにできますか？

#main{
width:818px;
padding:20px;
float:left;
background-color:white;
border-top-left-radius:20px;
border-left:1px solid #909090;
border-top:1px solid #909090;
}

#side{
float:left;
width:230px;
padding:20px;
background-color:#FEF5CA;
border-top:1px solid #909090;
border-right:1px solid #909090;
}

ありがとう。

4

4 に答える 4

1 
display: table-cell;

CSS3 はあなたの友達です ;-)

于 2013-05-06T21:17:51.403 に答える
0

テーブル レイアウトを div に置き換えるには、どのような方法が最適でしょうか??

display プロパティを使用して、すべてをテーブルのように再フォーマットします。;)

HTML

<div class="table-div" style="width:100%">
    <div class="tr-div">
        <div class="td-div">td-div 1a</div>
        <div class="td-div">td-div 2a</div>
        <div class="td-div">td-div 3a</div>
    </div>
    <div class="tr-div">
        <div class="td-div">td-div 1b</div>
        <div class="td-div">td-div 2b</div>
        <div class="td-div">td-div 3b</div>
    </div>
</div>

CSS

.table-div{display:table}
.tr-div{display:table-row}
.td-div{display:table-cell;border:1px solid silver}

ここでjsFiddled http://jsfiddle.net/sPm9M/

于 2013-05-07T22:17:02.663 に答える
0

それらをそれぞれクラスに入れることができるかもしれません。これにより、すべてのプロパティが同じになります。これを行うこともできます：

CSS

    #main,#side {
    width: //the width
    }

    #main {
    width:818px;
padding:20px;
float:left;
background-color:white;
border-top-left-radius:20px;
border-left:1px solid #909090;
border-top:1px solid #909090;
    }

    #side {
    float:left;
width:230px;
padding:20px;
background-color:#FEF5CA;
border-top:1px solid #909090;
border-right:1px solid #909090;
    }
于 2013-05-07T22:18:46.443 に答える
0

display: table-cell を使用するには、メインとサイドから float 属性を削除する必要があります。次に、両方に display: table-cell を追加すると、必要なことが行われます。

于 2013-05-07T22:11:24.583 に答える