【问题标题】:CSS Float border overlap issuesCSS Float 边框重叠问题
【发布时间】:2010-11-19 12:36:17
【问题描述】:

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

这是一个包含一些项目的屏幕截图:

另一个有几个项目

“Box 4”按预期移动了,但它的边框仍然在左边。哎哟

HTML:

开 “-//W3C//DTD XHTML 1.0 严格//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 标题>
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
标题
框 1 标题
内容放在这里
方框2标题
内容放在这里
方框3标题
内容放在这里
方框4标题
内容放在这里
换行
正文>

标签: css firefox css-float border overlap


【解决方案1】:

我认为你无法单独使用 css 来做到这一点,因为你正在与正常流程作斗争。元素通常是堆叠在一起的,当你向下浏览页面时,试图让一个元素让开并不是这样的工作方式。

【讨论】:

    【解决方案2】:

    box4 的 css 中应该有一个 clear:both; 属性。它应该可以解决问题。我刚刚对其进行了测试,它可以满足您的需求。

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

    【讨论】:

      【解决方案3】:

      你可以像这样更新你的#box4规则来解决这个问题:

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

      编辑 #box4 在一个长的sidenav css下面:

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

      【讨论】:

      • 如果我这样做的话,那么当菜单中的项目很少时,box4的左侧就会出现一个无用的间隙。
      • 您的另一个非 JavaScript 选项是将#box4 推到长边导航下方(编辑示例)如果您使用 Javascript,您可以在菜单太长时更改 box4 的样式,以便在它旁边顺利进行。
      【解决方案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>
      

      干杯!!!

      【讨论】:

      • 这实际上将 box4 推到了菜单下方。所以我有三个顶框,它们下面有一个巨大的间隙,直到菜单的底部。
      【解决方案5】:

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

      但是它不会有 100% 的宽度..

      正如你所理解的,这是无法修复的,因为 100% 的宽度总是会搞砸一些东西。你不能让它处于 100% 的宽度,但在推动时不会占用 100%...

      【讨论】:

        【解决方案6】:

        您错过了 container 之外的 box4。你可以在下面查看sn-p。

        #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<br />line break</div>
                    </div>
                    </div>
                    
                </body>
            </html>

        【讨论】:

          猜你喜欢
          • 2018-02-21
          • 1970-01-01
          • 2019-04-03
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2013-11-08
          • 2012-10-14
          • 1970-01-01
          相关资源
          最近更新 更多