1

我有一个<div>名为 bigbox ，其中包含一个<div>名为 wrapper 。包装器包含 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>
4

1 回答 1

1 
.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;
}

删除float:left你的.textbox，使其成为静态，因为静态块会自动将其他静态块向下推。还要删除height以避免设置固定高度并允许其高度自动收缩/包装。

要将复选框放置在您的图片中，您可以使用position:absolute; top:0px; right:0px;

检查演示

于 2013-06-30T10:58:08.623 回答