的三分之一，三分之二柱不會彼此對齊

我一直使用框架結構，這裏是我的代碼：的三分之一，三分之二柱不會彼此對齊

<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="stylesheets_skeleton/skeleton.css"> 
</head> 
<body class = "container sixteen columns" style = "height : 400px; border: solid 1px;"> 
    <div class = "two-thirds column" style = "height: 200px; border: solid 1px; float: left;"> 

    </div> 
    <div class = "one-third column" style = "height: 200px; border: solid 1px; float: right;"> 

    </div> 

</body>

即時得到這樣的輸出：

enter image description here

雖然我的預期輸出是這樣的：

enter image description here

請幫助，謝謝:)

來源

2014-03-13 CENT1PEDE

向我們展示「stylesheets_skeleton/skeleton.css」的CSS內容 – PravinS

我明白了，我添加了position：absolute;到左邊div的樣式。反正謝謝@PravinS :) – CENT1PEDE

這可能會幫助你

<html> 
    <head> 
     <title></title> 
     <link rel="stylesheet" href="stylesheets_skeleton/skeleton.css"> 
    </head> 
    <body class = "container sixteen columns" style = "height : 400px; border: solid 1px;"> 
    <div style="width:100%; float:left;"> 
     <div class = "two-thirds column" style = "height: 200px; border: solid 1px; float: left;"> 

     </div> 
     <div class = "one-third column" style = "height: 200px; border: solid 1px; float: right;"> 

     </div> 
    </div> 
    </body> 
</html>

來源

2014-03-13 06:20:04 Ricky

對不起，這沒有工作，謝謝你。我通過添加位置來獲得它的工作：絕對;到左邊的div。 – CENT1PEDE

無論如何，但它適用於我。 – Ricky

你可能想編輯它，並嘗試我所做的，所以我可以接受它作爲正確的答案，也許其他人會覺得這有幫助。謝謝 – CENT1PEDE

添加風格 '列' 從 '列'/'的孩子display:-webkit-box和刪除float風格16 '班。並做了。 :)

來源

2014-03-13 07:30:19

的三分之一，三分之二柱不會彼此對齊

回答

相關問題