问答详情
源自：13-4 起飞咯 - 浮动模型

请问怎么让它们另起一行显示？

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>怎么整？</title>
    <style type="text/css">
    #div1,#div2{
        width: 300px;
        height: 300px;
        border:1px blue solid;
        float: left;
    }
    #div3,#div4{
        width: 300px;
        height: 300px;
        border:1px pink solid;
        float: right;
    }
    #div5,#div6{
        width: 300px;
        height: 300px;
        border:1px red solid;
    }
    #div5{float: left;}
    #div6{float: right;}
    </style>
</head>
<body>
<div id="div1">栏目one</div>
<div id="div2">栏目two</div>  
<div id="div3">栏目three</div>
<div id="div4">栏目four</div>
<div id="div5">栏目five</div>
<div id="div6">栏目six</div>
</body>
</html>

全都挤在一起了，不知道咋整才可以，求解？

提问者：唯梦闲人 2015-11-29 14:24

个回答

  • 李晓健
    2015-11-29 15:28:00
    已采纳 

    <!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>怎么整？</title>
    <style type="text/css">
        #div1,#div2{
            width: 300px;
            height: 300px;
            border:1px blue solid;
            float: left;
        }
        #div3,#div4{
            width: 300px;
            height: 300px;
            border:1px pink solid;
            float: right;
        }
        #div5,#div6{
            width: 300px;
            height: 300px;
            border:1px red solid;
        }
        #div5{float: left;}
        #div6{float: right;}
        .clearfix{overflow:auto;_height:1%}
    </style>
</head>
<body>
<div class="clearfix">
    <div id="div1">栏目one</div>
    <div id="div2">栏目two</div>
</div>
<div class="clearfix">
    <div id="div3">栏目three</div>
    <div id="div4">栏目four</div>
</div>
<div class="clearfix">
    <div id="div5">栏目five</div>
    <div id="div6">栏目six</div>
</div>
</body>
</html>


    0
  • echo_kinchao
    2015-11-29 14:57:48

    父元素 给定宽 不够宽度就会给挤下去 另起一行啦

    0
  • 李晓健
    2015-11-29 14:49:01

    你想要一个什么样的效果呢，你有浮动，会到一行是正常的呀。

    0