为什么 DIV 不相邻排列答案

【问题标题】：Why are the DIV not lining up next to each other为什么 DIV 不相邻排列
【发布时间】：2014-08-15 00:03:15
【问题描述】：

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

显示：

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

【问题讨论】：

对嵌套的 DIV（即左右 DIV）使用而不是
谢谢大家的帮助 :) 都是可行的，不过我还是用display的方法。

标签： html css asp.net

【解决方案1】：

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

float: left;

解决这个问题，或者你可以添加

display: inline-block;

到 .leftdiv 和 .rightdiv 类。

这里有一些来自 CSS-Tricks 的关于 display 属性如何工作的更多信息。

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

【讨论】：

inline-block 可以在这里更好

【解决方案2】：

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

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

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

JS Fiddle example

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

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

【讨论】：