首页 文章

CSS Float边框重叠问题

提问于
浏览 次
4

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

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

http://i.stack.imgur.com/o56aZ.png

而另一个有几个项目

http://i.stack.imgur.com/J7MGB.png

“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
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;
}
css firefox css-float border overlap

6 回答

  • 0

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

    回复于
  • 0

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

    #box4 {
    border: 1px #000 solid;
    width: 100%;
    clear:both;
}
    回复于
  • 0

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

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

    Edit ＃box4下面有一个长边的css：

    #box4 {
   border: 1px #000 solid;
   clear: both;
}
    回复于
  • 2

    在“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
    line break</div>
</div>

    干杯!!!

    回复于
  • 2

    你可以将＃box4浮动到左边..

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

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

    回复于
  • 0

    你错过了 box4 以外的 box4 . 你可以查看下面的片段 .

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

    <?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
    line break</div>
            </div>
            </div>
            
        </body>
    </html>
    回复于

相关问题