<div id="dvFirst" class="mainSecond" style="background: #6FA5FD;">
<div id="leftdiv3" class="leftdiv">Client: </div>
<div id="rightdiv3" class="rightdiv"><asp:DropDownList ID="ddlCliNewMsg" AutoPostBack="true" ClientIDMode="Static" runat="server" CssClass="chosen-select" ></asp:DropDownList></div>
</div>
<div id="dvSecond" class="mainSecond" style="background: #f00">
<div id="leftdiv4" class="leftdiv">Site: </div>
<div id="rightdiv4" class="rightdiv"><asp:DropDownList ID="ddlSitNewMsg" AutoPostBack="true" ClientIDMode="Static" runat="server" CssClass="chosen-select"></asp:DropDownList></div>
</div>
<div id="dvThird" class="mainSecond" style="background: #808080">
<div id="leftdiv5" class="leftdiv">Provider: </div>
<div id="rightdiv5" class="rightdiv"><asp:DropDownList ID="ddlProNewMsg" AutoPostBack="true" ClientIDMode="Static" runat="server" CssClass="chosen-select"></asp:DropDownList></div>
</div>
<div id="dvFourth" class="mainFirst" style="background: #b6ff00">
<div id="leftdiv1" class="leftdiv">Message: </div>
<div id="rightdiv1" class="rightdiv"><asp:TextBox ID="tbMessage" ClientIDMode="Static" runat="server" TextMode="MultiLine" Columns="30" Rows="5"></asp:TextBox></div>
</div>
<div id="dvFifth" class="mainSecond" style="background: #0094ff">
<div id="leftdiv2" class="leftdiv">Active?</div>
<div id="rightdiv2" class="rightdiv"><asp:CheckBox ID="cbIsActive" ClientIDMode="Static" runat="server" /></div>
</div>
CSS:
.mainFirst
{
width: 95%;
margin: auto;
padding: 1%;
height: 90px;
border-bottom: 1px dotted #808080;
}
.mainSecond
{
width: 95%;
margin: auto;
padding: 1%;
height: 25px;
border-bottom: 1px dotted #808080;
}
.leftdiv
{
width: 25%;
height: 85px;
}
.rightdiv
{
width: 73%;
height: 30px;
}
显示器:
为什么他们没有正确排队?
答案 0 :(得分:2)
我认为这是因为div元素以“块”格式显示而不是“内联块”格式。这意味着div尝试垂直堆叠。你可以用
float: left;
要克服这一点,或者你可以添加
display: inline-block;
到.leftdiv和.rightdiv类。
以下是CSS-Tricks中有关显示属性如何工作的更多信息。
答案 1 :(得分:1)
您需要浮动leftdiv
和rightdiv
类,否则它们将显示在新行上。
.leftdiv {
float: left;
width: 25%;
height: 30px;
}
.rightdiv {
float: left;
width: 73%;
height: 30px;
}
答案 2 :(得分:1)
将以下类的css更改为:
.leftdiv
{
float: left;
width: 25%;
height: 85px;
}
.rightdiv
{
float: left;
width: 73%;
height: 30px;
}
但是,在每个父div之间,添加一个div与类:
.clearfix
{
clear: both;
}
所以,标记将是:
<div id="dvFirst" class="mainSecond" style="background: #6FA5FD;">
<div id="leftdiv3" class="leftdiv">Client: </div>
<div id="rightdiv3" class="rightdiv"><select class="chosen-select"></div>
</div>
<div class="clearfix"></div>
<div id="dvSecond" class="mainSecond" style="background: #f00">
<div id="leftdiv4" class="leftdiv">Site: </div>
<div id="rightdiv4" class="rightdiv"><select class="chosen-select"></div>
</div>
<div class="clearfix"></div>
<div id="dvThird" class="mainSecond" style="background: #808080">
<div id="leftdiv5" class="leftdiv">Provider: </div>
<div id="rightdiv5" class="rightdiv"><select class="chosen-select"></select></div>
</div>
<div class="clearfix"></div>
<div id="dvFourth" class="mainFirst" style="background: #b6ff00">
<div id="leftdiv1" class="leftdiv">Message: </div>
<div id="rightdiv1" class="rightdiv"><textarea cols="30" rows="5"></textarea></div>
</div>
<div class="clearfix"></div>
<div id="dvFifth" class="mainSecond" style="background: #0094ff">
<div id="leftdiv2" class="leftdiv">Active?</div>
<div id="rightdiv2" class="rightdiv"><input type="checkbox" /></div>
</div>
答案 3 :(得分:1)
您应该使用<label>
代替。将您的HTML更改为:
<div id="dvFirst" class="mainSecond" style="background: #6FA5FD;">
<label>Client: <asp:DropDownList ID="ddlCliNewMsg" AutoPostBack="true" ClientIDMode="Static" runat="server" CssClass="chosen-select" ></asp:DropDownList></label>
</div>
<div id="dvSecond" class="mainSecond" style="background: #f00">
<label>Site: <asp:DropDownList ID="ddlSitNewMsg" AutoPostBack="true" ClientIDMode="Static" runat="server" CssClass="chosen-select"></asp:DropDownList></label>
</div>
<div id="dvThird" class="mainSecond" style="background: #808080">
<label>Provider: <asp:DropDownList ID="ddlProNewMsg" AutoPostBack="true" ClientIDMode="Static" runat="server" CssClass="chosen-select"></asp:DropDownList></label>
</div>
<div id="dvFourth" class="mainFirst" style="background: #b6ff00">
<label>Message: <asp:TextBox ID="tbMessage" ClientIDMode="Static" runat="server" TextMode="MultiLine" Columns="30" Rows="5"></asp:TextBox></label>
</div>
<div id="dvFifth" class="mainSecond" style="background: #0094ff">
<label>Active? <asp:CheckBox ID="cbIsActive" ClientIDMode="Static" runat="server" /></label>
</div>
此代码更易于阅读和维护。