Question

您可以在此处查看问题：http://baycity2014.weebly.com/

我遇到了最棘手的问题。我设置了这些div，一切正常。但是当我将div向左移动而另一个向右移动时，它们似乎从它们的容器div中“出来”。容器div崩溃，下面的div低于父div和BEHIND子div。

如果我移除浮动：对，没问题。有什么问题？

HTML：

<div id="main-wrap2">
        <div class="block2">
            <div id="left_content">
            {content}
            </div>
            <div id="right_content">
            test<br/>
            test<br/>
            test<br/>
            </div>
        </div><!-- end container -->
    </div><!-- end main-wrap -->

CSS：

#main-wrap2 {
    width: 100%;
    border: 5px solid;
}

.block2 {
    margin: 0 auto;
    width: 940px;
}

#left_content {
    background:#ffffff;
    border-radius:5px;
    -webkit-box-shadow:  0px 0px 3px 0px rgba(0, 0, 0, 0.23);
    box-shadow:  0px 0px 3px 0px rgba(0, 0, 0, 0.23);
    margin-bottom:6px;
    width: 560px;
    margin-top: 10px;
    float: left;
}

#right_content {
    width: 270px;
    border: 1px solid;
    margin-top: 10px;
    float:right;
}

Answer 1

设定

 #main-wrap2 {
   display: inline-block;
 }

Answer 2

试一试：
制作一个CSS课程.clr:{clear:both}

并将你的HTML代码修改为：

<div id="main-wrap2">
    <div class="block2">
        <div id="left_content">
        {content}
        </div>
        <div id="right_content">
        test<br/>
        test<br/>
        test<br/>
        </div> <div class="clr"></div>
    </div><!-- end container -->
</div><!-- end main-wrap -->

希望它能帮助你：）

Answer 3

让他们的父母拥有：

 .block2 {
   overflow:auto;
 }

这将允许它与孩子一起调整大小。

Answer 4

这是一个经典的clearfix问题。说明：http://nicolasgallagher.com/micro-clearfix-hack/

基本上它使用伪元素添加一个“clear：both;”的div。它就这样清除了。

Answer 5

就像西蒙所说，提出一些背景来看待差异

display:inline-block;
background:aqua;

Answer 6

    <div id="main-wrap2">
            <div class="block2">
                <div id="left_content">
                {content}
                </div>
                <div id="right_content">
                test<br/>
                test<br/>
                test<br/>
                </div>
            </div><!-- end container -->
        </div><!-- end main-wrap -->

    #main-wrap2 {
        width: 940px;
border: 5px solid;
margin: 0 auto;
    }

    .block2 {
        display: inline-table !important;
    }

    #left_content {
        background:#ffffff;
        border-radius:5px;
        -webkit-box-shadow:  0px 0px 3px 0px rgba(0, 0, 0, 0.23);
        box-shadow:  0px 0px 3px 0px rgba(0, 0, 0, 0.23);
        margin-bottom:6px;
        width: 560px;
        margin-top: 10px;
        float: left;
    }

    #right_content {
        width: 270px;
        border: 1px solid;
        margin-top: 10px;
        float:right;
    }

我希望这适合你！

Answer 7

#main-wrap2 {
            width: 100%;
            border: 5px solid;
            overflow:auto;
            }
.block2 {
         margin: 0 auto;
         width: 940px;
         overflow:auto;
        }

/ *使用溢出：隐藏;或溢出：auto;在父div标签.. * /

Answer 8

如果浮动元素，则需要确保其父元素也是浮动的。

CSS - 浮动左/右问题

8 个答案: