如何在html / css中将Box并排放置在另一个下面

时间:2013-11-22 03:59:43

标签: html css class

我想这样做是为了让TopBox在顶部,而BottomLeft在TopBox之下但在左边,而BottomRight在topbox之下,但是在右边,这样两者在TopBox下面均匀分享空间

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"> 

2 个答案:

答案 0 :(得分:0)

你的topbox有width : 300px但是左右填充的总数为width : 340px .....你还没有考虑到底盒的问题

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

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

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

}

答案 1 :(得分:0)

John 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%;
}