0

これが私の現在のコードですが、何が問題なのかわかりません。私はhtmlが初めてなので、よくわかりません。左側に約 20% のスペースで列を配置し、中央に列を配置して 60% のスペースを使用し、右側に列を配置して 20% のスペースを使用したいと考えています。

#wrapper {
    background-color: #788D9A;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

#mainleft {
    width: 20%;
    float: left;
    padding: 10px;
    text-align: center;
    background-color: #ABB8C0;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    border-right: solid black;
    display:inline-block;
}

#maincenter {
    width: 60%;
    float: left;
    overflow: hidden;
    text-align: center;
    padding: 10px;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    display:inline-block;


}

#mainright {
    width: 20%;
    float: left;
    padding: 10px;
    text-align: center;
    background-color: #ABB8C0;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    border-right: solid black;

}
4

3 に答える 3

2

padding-left padding-right margin-left margin-right border-left使用するとき、およびborder-rightそのタイプのレイアウトが必要なときに注意する必要があります。

これらの各スタイルはその要素の全体的な幅に影響するため、 a を追加するpadding: 10pxと実際にdiv width=になります20% + 20px。

その内側のパディングとボーダースタイルを内側にしたい場合div

例: http://jsfiddle.net/b62Ju/2/

HTML

<div id="wrapper">    
    <div id="mainleft">
        <div>L</div>
    </div>
    <div id="maincenter">
        <div>C</div>
    </div>
    <div id="mainright">
        <div>R</div>
    </div>
</div>​

CSS

#wrapper {
    background-color: #788D9A;
}

#wrapper > div
{
    height: 1000px;
    float: left;
    text-align: center;
}

#mainleft {
    width: 20%;    
    background-color: #ABB8C0;
}

#maincenter {
    width: 60%;
}

#mainright {
    width: 20%;
    background-color: #ABB8C0;
}

#maincenter > div
{    
    height: 1000px;
    border-left: solid black;
    border-right: solid black;
}

#mainleft > div, 
#maincenter > div,
#mainright > div
{
    padding: 10px;
}

box-modelまたは、次のスタイルを使用することもできます。

.box
{
    box-sizing: border-box;
    ms-box-sizing: border-box;
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box;
}

詳細: http://www.quirksmode.org/css/box.html

于 2012-12-13T18:18:14.773 に答える
1

ここdisplay: tableでは、プロパティが最良の選択のようです。ボックスモデルの調整を気にすることなく、同じ高さの列 (クレイジーな下マージン/パディングの目的だと思います)、余分なマークアップ、およびパディングを取得できます (ボックスモデルの詳細については、 http:/を参照してください)。 /css-tricks.com/the-css-box-model/ )。

http://jsfiddle.net/b62Ju/3/

#wrapper {
    display: table;
    width: 100%;
}

#wrapper > div
{
    display: table-cell;
    padding: 1em;
}

#mainleft {
    width: 20%;    
    background-color: orange;
}

#maincenter {
    width: 60%;    
}

#mainright {
    width: 20%;
    background-color: green;
}
于 2012-12-13T18:41:55.277 に答える
0

3 つのダイブを並べて配置する必要がある場合は、参考までに、

HTML:

<div class="main">
    <div class="left">...</div>
    <div class="center">...</div>
    <div class="right">...</div>
</div>

CSS:

.main {
    width: 1000px;
    float: left;
    display: inline-block;
}

.left {
    width : 20%;
    float: left;
    display: inline-block;
}

.right {
    width : 20%;
    float: left;
    display: inline-block;
}

.center {
    width : 60%;
    float: left;
    display: inline-block;
}

それが動作します。

あなたのコードでは、メイン ラッパー div の幅を設定する必要があると思います。

于 2012-12-13T18:20:19.667 に答える