Question

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

显示器：

enter image description here

为什么他们没有正确排队？

Answer 1

我认为这是因为div元素以“块”格式显示而不是“内联块”格式。这意味着div尝试垂直堆叠。你可以用

float: left;

要克服这一点，或者你可以添加

display: inline-block;

到.leftdiv和.rightdiv类。

以下是CSS-Tricks中有关显示属性如何工作的更多信息。

http://css-tricks.com/almanac/properties/d/display/

Answer 2

您需要浮动leftdiv和rightdiv类，否则它们将显示在新行上。

.leftdiv {
    float: left;
    width: 25%;
    height: 30px; 
}

.rightdiv {
    float: left;
    width: 73%;
    height: 30px;   
}

JS Fiddle example

Answer 3

将以下类的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>

Answer 4

您应该使用<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>

此代码更易于阅读和维护。

为什么DIV没有彼此排队

4 个答案: