Question

我的表格中有三个div。一个主div和两个子div（一个用于左元素，另一个用于右元素）。我已经把一切都搞定了。但是当窗口调整大小时，左右两个div相互重叠。请建议我做任何真正的方法..

查看代码

<div id="first" style="width: 100%;">
 <div class="divmain">
  <div class="divleft">
                <label class="label">
                    Invoice No.</label><span class="mand">*</span>
  </div>
  <div class="divright">
                @Html.TextBoxFor(model => model.No, new { @class = "txtbox" })
                @Html.ValidationMessageFor(model => model.No)
  </div>
 </div>
</div>

CSS代码

.divmain
{
padding: 15px;
width: auto;
position: relative;
height: auto !important;

}

.divmain .divleft
{

position: absolute;
top: 0;
left: 1%;
bottom: 0;
height: auto;

}

.divmain .divright
{
position: absolute;
top: 0;
bottom: 0;
left: 16%;
}

link for the demo

即使窗口调整大小，div也不应该相互重叠，并且应该在窗口最大化时保持不变。

Answer 1

请参阅DEMO！

.divmain
{
padding: 15px;
width: auto;
position: relative;
height: auto !important;
background:#CCCCCC;
}

.divmain .divleft
{
float:left;
width:auto;
top: 0;
left: 1%;
bottom: 0;
height: auto;
display:block;
background:#CCCFFF;
}

.divmain .divright
{
float:left;
width:auto;
top: 0;
bottom: 0;
left: 16%;
display:block; 
background:#CCFFFF;
}

安排不重叠的Div

1 个答案: