V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
darasion
V2EX  ›  问与答

CSS布局问题,如何绕过这个清理元素?

  •  
  •   darasion · 2011-10-18 20:50:24 +08:00 · 4696 次点击
    这是一个创建于 4784 天前的主题,其中的信息可能已经有所发展或是发生改变。
    想做个两列布局,左侧用float,右侧用margin-left。
    但是发现#bb总是会在#a的下边。怎么能绕过这个#bb呢?求解
    html:
    <div id="main">
    <div id="a"></div>
    <div id="b">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div id="bb"></div>
    </div>
    </div>

    css:
    #a{float:left;width:100px;height:200px;}
    #b{margin-left:110px;}
    .item{ float:left;}
    #bb{clear:both;}
    11 条回复    1970-01-01 08:00:00 +08:00
    mywaiting
        1
    mywaiting  
       2011-10-18 20:57:57 +08:00
    弄个clearfix进去....
    darasion
        2
    darasion  
    OP
       2011-10-18 21:04:41 +08:00
    @mywaiting 具体因该怎样做呢?
    kasuganosora
        3
    kasuganosora  
       2011-10-18 21:23:09 +08:00
    #b{ width:100px; background:yellow;
    float:left;
    }
    是这样的效果么
    supersheep
        4
    supersheep  
       2011-10-18 21:54:38 +08:00
    我的做法一般是,上下结构就直接写static元素。
    左右结构就让子元素float:left,父:元素写 :after{display:block;clear:both;content:'';}
    基本能应对大多数情况
    fim8
        5
    fim8  
       2011-10-18 22:29:15 +08:00
    不明白楼主意思,绕过去是什么意思?
    spritevan
        6
    spritevan  
       2011-10-18 22:35:49 +08:00
    #main { padding-left:100px; }
    #a { float:left; margin-left:-100px; /*for ie6 double margin width*/_display:inline; }
    darasion
        7
    darasion  
    OP
       2011-10-18 23:38:55 +08:00
    @spritevan @supersheep 多谢,我试试看先。
    Sivan
        8
    Sivan  
       2011-10-18 23:52:50 +08:00
    给#b加float就行了。可以清理内部浮动,又不会到#a下面
    darasion
        9
    darasion  
    OP
       2011-10-19 00:11:02 +08:00
    @Sivan #b 加 float 之后,宽度就不能自动伸展了。
    keakon
        10
    keakon  
       2011-10-19 04:32:40 +08:00
    @darasion 不知道我理解错没,你是要把#bb紧贴在#b下面吧。

    先去掉#a的float,因为clear:left的元素左边不能出现浮动元素,这会导致#b只能在它下面。

    接下来有2种选择:
    1.把#b设为position: relative; top: -200px;
    2.把#b设为position: absolute; top: 0; width: 100%;


    或者把#a设为position: absolute,再给#b一个左边距就行了。
    .item也可以用display: inline-block取代float:left,这样就不用clear了。
    总之,布局时尽量避免float吧。
    sigone
        11
    sigone  
       2011-10-19 09:39:12 +08:00
    如果 #b 不需要背景填充的话
    给 #bb 加 height:1px; overflow:hidden; 即可
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2654 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 11:08 · PVG 19:08 · LAX 03:08 · JFK 06:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.