Question

我最近一直在学习CSS并进入960网格系统。我现在卡住了，我想知道如何在这里将两个或多个div正确地对齐到我的网站。

所以，我想要做的是水平对齐网格3和网格4 div。

<div class="container_12">
    <div class="grid_12" id="img"></div>
    <div class="clear"></div>

    <div class="grid_12" id="navbar">
        <ul>
            <li>Home</li>
            <li>Portfolio</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </div>
    <div class="clear"></div>

    <div class="grid_12 spacer"></div>
    <div class="clear"></div>

    <div class="grid_12" id="info_wrapper">
        <div class="grid_3">Lorem Ipsum</div>
        <div class="grid_3">Lorem Ipsum</div>
        <div class="grid_3">Lorem Ipsum</div>
        <div class="grid_3">Lorem Ipsum</div>
    </div>
    <div class="clear"></div>

    <div class="grid_12 spacer"></div>
    <div class="clear"></div>

    <div class="grid_4">Lorem Ipsum</div>
    <div class="grid_4">Lorem Ipsum</div>
    <div class="grid_4">Lorem Ipsum</div>
    <div class="clear"></div>

    <div class="grid_12 spacer"></div>
    <div class="clear"></div>

    <div class="grid_12" id="footer">
        <div class="grid_4 alpha">Lorem Ipsum</div>
        <div class="grid_4">Lorem Ipsum</div>
        <div class="grid_4 omega">Lorem Ipsum</div>
    </div>
    <div class="clear"></div>
</div>

Answer 1

始终使用flex-box格式化内容并将其与css对齐。我不能强调弹性盒的力量和易用性。以下是使用flex-box解决问题的有效方法： http://codepen.io/pen/?editors=110

还有一点需要注意：只有在绝对必要的时候才添加一个html元素，比如div。使用大量div的页面混乱不被认为是语义的，因此请记住前进。

这是未来项目的另一个很好的弹性盒追索权： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

快乐的编码，亚历

body {
  margin: 0;
  padding: 0;
}

.grid_3{
  height:100px;
  width: 50%;
  background-color:yellow;
  flex-direction: row;
}

.grid_4{
  height:100px;
  width: 50%;
  background-color:red;
  flex-direction: row;
}

.flexer {
  display: flex;
}

#footer {
  width: 100%;
  background-color: blue;
  height: 100px;
}

<div class="container_12">
    <div class="grid_12" id="img"></div>
    <div class="clear"></div>

    <div class="grid_12" id="navbar">
        <ul>
            <li>Home</li>
            <li>Portfolio</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </div>

  <div class='flexer'>
        <div class="grid_3">Lorem Ipsum</div>
        <div class="grid_3">Lorem Ipsum</div>
        <div class="grid_3">Lorem Ipsum</div>
        <div class="grid_3">Lorem Ipsum</div>
   
        <div class="grid_4">Lorem Ipsum</div>
        <div class="grid_4">Lorem Ipsum</div>
        <div class="grid_4">Lorem Ipsum</div>
  </div>

    <div id="footer">
        <div class="alpha">Lorem Ipsum</div>
        <div class="">Lorem Ipsum</div>
        <div class="omega">Lorem Ipsum</div>
    </div>

</div>

如何在960网格系统中对齐div

1 个答案: