3 Column Div Style

いくつかの奇妙な理由から、私はこれが正しく動作するようにはできません（3列レイアウトの場合）、それらは異なる行にあるかのように表示されます。 ------------------- CSS -----------------3 Column Div Style

.left_content{ 
    float:left; 
    position:relative; 
    width:30%; 
    padding:10px; 
    margin-right:0px; 
    margin-left:0px; 
    border-style:solid; 
    border-width:2px; 
    background-image: url(../images/right_divider.gif); 
    background-repeat: no-repeat; 
    background-position: left bottom; 



} 


.center_content{ 
    float:left; 
    position:relative; 
    width:40%; 
    padding:10px; 
    margin-left:10%; 
    border-style:solid; 
    border-width:0px; 
    background-image: url(../images/right_divider.gif); 
    background-repeat: no-repeat; 
    background-position: left bottom; 

} 
.right_content{ 
    float:right; 
    position:relative; 
    width:20%; 
    padding:10px; 
    border-style:solid; 
    border-width:0px; 
    background-image: url(../images/right_divider.gif); 
    background-repeat: no-repeat; 
    background-position: left bottom; 

} 
---------------html-------------- 
<div class="left_content"> 
    Nav Left 
    </div> 


    <div class="center_content"> 
    main Con<br>main Con<br>main Con<br>main Con<br>main Con<br>main Con<br>main Con<br> 
    </div> 


<div class="right_content"> 
    right Con 
    </div>

出典

2011-07-13 Frank Nwoko

誰と.center_contentクラスの幅を小さくする必要があり下さい？ –

@frank;あなたのコードで表示されるように、合計幅が3のdiv'sは100%以上です。理由理由はpadding & borderです。したがって、css3 box-sizingプロパティを使用することができます。それはdivに幅を追加するためのパディングを停止します。

CSS：

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;

チェックこの例http://jsfiddle.net/wVfeG/

注：IE7はbox-sizingプロパティをサポートしていませんでした。したがって、あなたの部門paddingを&とし、margin to it's childを削除することができます。

出典

2011-07-13 11:28:49 sandeep

<body> 
<div id="header"> 
<h1>Header</h1> 
</div> 
<div id="left"> 
Port side text... 
</div> 
<div id="right"> 
Starboard side text... 
</div> 
<div id="middle"> 
Middle column text... 
</div> 
<div id="footer"> 
Footer text... 
</div> 
</body> 
And here's the CSS code: 
body { 
margin: 0px; 
padding: 0px; 
} 
div#header { 
clear: both; 
height: 50px; 
background-color: aqua; 
padding: 1px; 
} 
div#left { 
float: left; 
width: 150px; 
background-color: red; 
} 
div#right { 
float: right; 
width: 150px; 
background-color: green; 
} 
div#middle { 
padding: 0px 160px 5px 160px; 
margin: 0px; 
background-color: silver; 
} 
div#footer { 
clear: both; 
background-color: yellow; 
}

OR あなたのために以下のリンク（http://www.neuroticweb.com/recursos/3-columns-layout/）

出典

2011-07-13 11:18:13

あなたはCSS3から列幅/列ギャップを見なければならない:) http://www.css3.info/preview/multi-column-layout/

出典

2011-07-13 12:35:15 Simon

あなたは

margin-left:10%;を与えるならば、あなたは35

出典

2011-07-13 13:11:24 Thamaraiselvi