如何在HTML/css中並排放置框但不在另一個框中

Question

我想使TopBox位於頂部，而BottomLeft位於TopBox之下但位於左側而BottomRight位於頂部框之下但位於右側，兩股平均低於頂盒的空間

CSS

.textbox { 
    border: 1px solid #848484; 
    -moz-border-radius-topleft: 30px; 
    -webkit-border-top-left-radius: 30px; 
    border-top-left-radius: 30px; 
    -moz-border-radius-topright: 30px; 
    -webkit-border-top-right-radius: 30px; 
    border-top-right-radius: 30px; 
    outline: 0; 
    height: 25px; 
    display: block; 
} 

.textboxSquare { 
    display: inline-block; 
} 

#TopBox { 
    width: 300px; 
    padding-left: 20px; 
    padding-right: 20px; 
} 

#BottomLeft { 
    height: 25px; 
    width: 150px; 
} 

#BottomRight { 
    height: 25px; 
    width: 150px; 
} 

HTML

<input class="textbox" id="TopBox" type="text"></div> 
<input class="textboxSquare" id="BottomLeft" type="text"> 
<input class="textboxSquare" id="BottomRight" type="text"> 

Answer 1

你頂盒具有width : 300px但左，右填充獲得的總width : 340px .....你有沒有考慮到這點的底盒

的jsfiddle：http://jsfiddle.net/logintomyk/2gmWh/

#BottomLeft { 
    height: 25px; 
    width: 164px; 
} 

#BottomRight { 
    height: 25px; 
    width: 164px; 

} 

Answer 2

約翰Kurlak的解決方案似乎是你想要的，這裏有一個更靈活一點的版本。 你可以改變容器的寬度和其他框會擴展到匹配：

http://jsbin.com/AqoXECeB/1/edit?html,css,output

請記住，當你添加填充物或保證金，你必須相應地調整大小。

HTML

<div id="container"> 
    <input class="textbox" id="TopBox" type="text" /> 
    <input class="textboxSquare" id="BottomLeft" type="text" /><input class="textboxSquare" id="BottomRight" type="text" /> 
</div> 

CSS

* { margin: 0; padding: 0; } 

.textbox { 
    border: 1px solid #848484; 
    -moz-border-radius-topleft: 30px; 
    -webkit-border-top-left-radius: 30px; 
    border-top-left-radius: 30px; 
    -moz-border-radius-topright: 30px; 
    -webkit-border-top-right-radius: 30px; 
    border-top-right-radius: 30px; 
    outline:0; 
    height:25px; 
    display: block; 
    box-sizing: border-box; 
} 

#container { 
    width: 300px; 
    padding-left:20px; 
    padding-right:20px; 
} 

#TopBox { 
    width: 100%; 
} 

.textboxSquare { 
    display:inline-block; 
    box-sizing: border-box; 
    height:25px; 
    width: 50%; 
}