4或5个模型水平对齐排列

来源:13-4 起飞咯 - 浮动模型

慕瓜5980833

2016-08-18 15:58

刚刚问了慕友了

如何让3个模块一个左边一个居中一个右边

慕友的回答直接解决了我的问题:如下图

http://img.mukewang.com/57b56a6200015f9211700459.jpg

那么现在如果有4个或者以上模块我需要并排对齐显示要怎么做

div{

border:2px red solid;

    width:30px;

    height:50px;

}

</style>

</head>

<body>

<div id="div1">栏目1</div>

<div id="div2">栏目2</div>

<div id="div3">栏目3</div>

<div id="div4">栏目4</div>

比如这样的效果

http://img.mukewang.com/57b56a800001c11105390103.jpg


写回答 关注

3回答

  • 子非鱼阳明
    2016-08-18 16:06:52
    已采纳

    涉及到布局,还要给块命名 <div class="">

    慕瓜5980...

    非常感谢!

    2016-08-18 16:19:24

    共 3 条回复 >

  • nima3693049
    2016-08-18 19:48:23

    这样呢

    <html>

    <head>

    <style type="text/css">

        .div {

            border: 2px red solid;

            width: 80px;

            height: 50px;

            margin:auto;

        }

        tr {

        width:100%;

        }

        .tbl {

        width:100%;

        margin:auto;

        }

    </style>

    </head>

    <body>

        <table class="tbl">

        <tr>

            <td>

                <div class="div">section 1</div>

            </td>

            <td>

                <div class="div">section 2</div>

            </td>

            <td>

                <div class="div">section 3</div>

            </td>

            <td>

                <div class="div">section 4</div>

            </td>

        </tr>

        </table>

    </body>

    </html>


  • qq_一匹马赛克_03816094
    2016-08-18 16:52:06

    http://img.mukewang.com/57b576fe0001599908980274.jpg

    <ul>
    <li class="a"></li>
    <li class="b"></li>
    <li class="c"></li>
    <li class="d"></li>
    </ul>

    .a{
       width: 20px;
       height: 100px;
       background-color: red;
       margin-bottom: 100px;
    }
    .b{
       width: 20px;
       height: 100px;
       background-color: red;
    }
    .c{
       width: 20px;
       height: 100px;
       background-color: red;
    }
    .d{
       width: 20px;
       height: 100px;
       background-color: red;
    }
    li{
       float:left;
       margin-right: 100px;
    }

    这样可以么?

    慕瓜5980...

    但是这样只是一个无序排列了,我刚试了一下,把网页整个窗口缩小,当窗口缩到300像素的时候就不能再缩了,那4个块就会在左边形成一坚排

    2016-08-18 17:30:42

    共 2 条回复 >

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225812 学习 · 18234 问题

查看课程

相似问题