html - 为什么 DIV 没有彼此相邻排列

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

显示:

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

Answer 1

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

float: left;

为了克服这个问题，或者你可以添加

display: inline-block;

.leftdiv 和 .rightdiv 类。

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

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