Question

我希望DIV并排而不是下方，我不确定为什么Box2继续出现在box1下面。更新：这是实际的代码。我删除了所有链接和引用以简化它。我没有看到任何DIV丢失。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="KnowledgeBase.ascx.cs" Inherits="Control_KnowledgeBase" %>
    <!-- OPENS THE PAGE HEADER DIV -->
    <!-- InstanceEndEditable -->
    <div id="MainContent">
        <!-- OPENS THE MAIN CONTENT DIV -->
        <!-- InstanceBeginEditable name="MainContent" -->
        <h2 class="Billboard">
            <a href="#">System Knowledge Base</a></h2>
        <div class="Billboard">
            <p align="center">
                    <a href="../customercare.aspx">Home</a> I <a href="../customercare.aspx">Customer Care</a> 
                    I <a href="../fieldcustomercare.aspx">Field Customer Care</a> 
                    I <a href="../Logout.aspx"> Logout </a>
                </p>
        </div>

<h2 class="Billboard">
            General System Information</h2>
        <div class="Billboard">
            <p>
                80 Links and Documents
            </p>
        </div>

        <h2 class="QuickLinks">
            Build Release Notes</h2>
        <div class="QuickLinks"style="float:left;width:48%;">

                <p>
             120 Links and Documents

                </p>

            </div>

        </div>


        <h2 class="QuickLinks">
            Supplemental Release Notes</h2>
        <div class="QuickLinks"style="float:left;width:48%;">

                <p>

10 Link and Documents

                </p>
             </div>


        <h2 class="Billboard">
            TFACTS Customer Care</h2>
        <div class="Billboard">
            <p>
                10 Link and Documents
            </p>
        </div>
        <h2 class="Billboard">
            Reference Materials and Storyboards
        </h2>
        <div class="Billboard">
            <p>
                250 Links and documents
            </p>
        </div>
        <!-- InstanceEndEditable -->
    </div>

    <!-- CLOSES THE MAIN CONTENT DIV -->

Answer 1

FIDDLE http://jsfiddle.net/8gd0u79y/

某些标签不合适

<div class="box1">
     <h2 class="QuickLinks">
                    Build Release Notes</h2>

    <div class="QuickLinks"><p>TEST</p>
    </div>
</div>
<div class="box2">
     <h2 class="QuickLinks">
                    Supplemental Release Notes</h2>

    <div class="QuickLinks"><p>TEST2</p>
    </div>
</div>

添加inline-block;

.box1,.box2{ 
   display:inline-block; 
    margin:10px;
}

Answer 2

你有两个不匹配的div标签。将两个</p>替换为</div>：

<div class="box1">
    <h2 class="QuickLinks">Build Release Notes</h2>
    <div class="QuickLinks">TEST</div>
</div>

<div class="box2">
    <h2 class="QuickLinks">Supplemental Release Notes</h2>
    <div class="QuickLinks">TEST2</div>
</div>

CSS应该是这样的：

  .box1 { float: left; margin-right: 1em; clear: left; }
  .box2 { float: left; clear: right; }

Answer 3

您可以在CSS中尝试以下任一方法：

.box1, .box2 {
    float: left;
}

或

.box1, .box2 {
    display: inline-block;
}

DIV没有并排出现

3 个答案: