我有一个 <div>
称为 bigbox,其中包含 <div>
称为包装器。包装包含 2 <div>
称为文本框和复选框。如果文本框内的字符溢出,它不会将另一个包装器推到下面。我怎样才能让下面的包装器下降?
这是 jsfiddle:http://jsfiddle.net/WA63P/
<html>
<head>
<title>Page</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<style type="text/css">
.bigbox {
background-color: #F5E49C;
color: #000;
padding: 0 5px;
width:280px;
height:500px;
position: absolute;
text-align: center;content: "";display: block;clear: both;
}
.box {
background-color: #272822;
color: #9C5A3C;
height:100px;
width:260px;
margin-bottom: 10px;
position: relative; top:10px;
}
.textbox
{
background-color: #FFFFFF;
color: #272822;
height:100px;
width:160px;float:left;text-align: left
}
.checkbox
{
background-color: #FFFFFF;
height:50px;
width:50px;
float:right;
d
}
</style>
<div class="bigbox">
<div class="box">
<div class="textbox">background background background background background background background background background background background background background background background background background background background background background background </div>
<div class="checkbox"> </div>
</div>
<div class="box">
<div class="textbox"> </div>
<div class="checkbox"> </div>
</div>
</body>
</html>
最佳答案
.bigbox {
background-color: #F5E49C;
color: #000;
padding: 0 5px;
width:280px;
height:500px;
position: absolute;
text-align: center;content: "";display: block;
}
.box {
background-color: #272822;
color: #9C5A3C;
width:260px;
margin-bottom: 10px;
position: relative; top:10px;
}
.textbox
{
background-color: #FFFFFF;
color: #272822;
min-height:100px;
width:160px;
text-align: left;
}
.checkbox
{
background-color: #FFFFFF;
width:50px;
position:absolute;
top:0px;
right:0px;
height:50px;
}
删除 .textbox
中的 float:left
使其成为静态的,因为静态 block 会自动将其他静态 block 向下推。同时删除 height
以避免设置固定高度并允许其高度自动收缩/换行。
要将复选框定位为图片中的位置,您可以使用 position:absolute;顶部:0px;右:0px;
检查 demo
关于CSS 溢出字符未向下推 <div>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17389321/