Question

我正在尝试将菜单浮动到页面的左侧，当它变得足够大以达到下面的内容时，Firefox将内容完全按照应有的方式颠覆...除了边框。

这是一个包含几个项目的屏幕截图：

另一个有几个项目

“Box 4”按预期移动，但其边框位于左侧。 O.o

HTML：

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC
        "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <title></title>
            <link rel="stylesheet" href="css/main.css" />
        </head>
        <body>
            <div id="menu">
                <ul>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </div>
            <div id="title">
                <img src="img/logo.png" alt="logo" />
                <span id="title_text">Title</span>
            </div>
            <div id="container">
                <div id="box1" class="topbox">
                    <div class="title">Box 1 Title</div>
                    <div class="content">Content goes here</div>
                </div>
                <div id="box2" class="topbox">
                    <div class="title">Box 2 Title</div>
                    <div class="content">Content goes here</div>
                </div>
                <div id="box3" class="topbox">
                    <div class="title">Box 3 Title</div>
                    <div class="content">Content goes here</div>
                </div>
            </div>
            <div id="box4">
                <div class="title">Box 4 Title</div>
                <div class="content">Content goes here<br />line break</div>
            </div>
        </body>
    </html>

CSS：

#menu {
    float: left;
    width: 100px;
    padding-left: 0px;
}

#menu ul {
    margin: 0px;
    padding: 10px;
}

#title {
    margin-left: 100px;
    border: 1px #F00 dashed;
    height: 40px;
    font-size: 20pt;
}

#title_text {
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
}

#container {
    margin-left: 100px;
}

.topbox {
    width: 30%;
    height: 200px;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-right: 2px;
    margin: none;
    border: 1px #F00 solid;
}

.topbox .title {
    text-align: center;
    border-bottom: 1px #000 solid;
    padding-top: 1px;
}

.content {
    padding: 2px;
}

#box4 {
    border: 1px #000 solid;
    width: 100%;
}

#box4 .title {
    display: inline;
    border-right: 1px #000 solid;
    border-bottom: 1px #000 solid;
    padding-left: 2px;
    padding-right: 2px;
}

#box4 .content {
    display: inline;
}

Answer 1

我认为你无法单独使用css，因为你正在与正常的流程作斗争。元素通常堆叠在一起，并试图让一个人在你走下页面时移开，这不是它的工作原理。

Answer 2

box4在其css中应该有clear:both;属性。它应该做的伎俩。我只是测试了它，它可以做你想要的。

#box4 {
    border: 1px #000 solid;
    width: 100%;
    clear:both;
}

Answer 3

您可以通过更新＃box4规则来解决此问题：

#box4 {
   border: 1px #000 solid;
   margin-left: 100px;
}

编辑＃box4在long sidenav css：

下面

#box4 {
   border: 1px #000 solid;
   clear: both;
}

Answer 4

在“box4”div上方添加以下行。

<div style="clear:both;"></div>

这样您的代码应如下所示：

<div style="clear:both;"></div><!-- including this line clear floats --> 
<div id="box4">
 <div class="title">Box 4 Title</div>
 <div class="content">Content goes here<br />line break</div>
</div>

干杯!!!

Answer 5

您可以将＃box4浮动到左侧..

然而它不会有100％的宽度..

正如你所说，这是不可修复的，因为100％的宽度总会弄乱一些东西......你不能把它放在100％的宽度上但是在推动时不会占用100％......

Answer 6

您错过了容器之外的 box4 。你可以查看下面的片段。

＆＃13;

#menu {
    float: left;
    width: 100px;
    padding-left: 0px;
}

#menu ul {
    margin: 0px;
    padding: 10px;
}

#title {
    margin-left: 100px;
    border: 1px #F00 dashed;
    height: 40px;
    font-size: 20pt;
}

#title_text {
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
}

#container {
    margin-left: 100px;
}

.topbox {
    width: 30%;
    height: 200px;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-right: 2px;
    margin: none;
    border: 1px #F00 solid;
}

.topbox .title {
    text-align: center;
    border-bottom: 1px #000 solid;
    padding-top: 1px;
}

.content {
    padding: 2px;
}

#box4 {
    border: 1px #000 solid;
    width: 100%;
}

#box4 .title {
    display: block;
    border-right: none;
    border-bottom: 1px #000 solid;
    padding-left: 0px;
    padding-right: 0px;
    text-align:center;
    
}

#box4 .content {
    display: inline;
}

＆＃13;

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC
        "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <title></title>
            <link rel="stylesheet" href="css/main.css" />
        </head>
        <body>
            <div id="menu">
                <ul>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </div>
            <div id="title">
                <img src="img/logo.png" alt="logo" />
                <span id="title_text">Title</span>
            </div>
            <div id="container">
                <div id="box1" class="topbox">
                    <div class="title">Box 1 Title</div>
                    <div class="content">Content goes here</div>
                </div>
                <div id="box2" class="topbox">
                    <div class="title">Box 2 Title</div>
                    <div class="content">Content goes here</div>
                </div>
                <div id="box3" class="topbox">
                    <div class="title">Box 3 Title</div>
                    <div class="content">Content goes here</div>
                </div>
                <div id="box4">
                <div class="title">Box 4 Title</div>
                <div class="content">Content goes here<br />line break</div>
            </div>
            </div>
            
        </body>
    </html>

＆＃13;

CSS Float边框重叠问题

6 个答案: