Question

我有5个div如下：

<div class="centered" style="background-color:red;">top</div>
<div style="background-color:orange;">left</div>
<div style="background-color:yellow;">center</div>
<div style="background-color:green;">right</div>
<div class="centered" style="background-color:blue;">bottom</div>

我想将第一个（带有居中的类）放在顶部中心，第二个（带有“左”文本），第三个（带有“中心”文本）和第四个（带有“右”文本）在中心正下方的一排中。最后，第五个（中心类）位于3 div的下方中心。我试过但这只是浪费时间。你能用css帮助我吗？

Answer 1

喜欢这个吗？

＆＃13;

div {
  height: 200px;
  
  display: border-box;
}

.centered {
  margin: 0 auto;
  width: 33.33%;
}

.row {
    
}

.row div {
  width: 33.33%;
  float: left;
}

.row:after {
  display: table;
  content: ' ';
  clear: both;
}

＆＃13;

<div class="centered" style="background-color:red;">top</div>
<div class="row">
  <div style="background-color:orange;">left</div>
  <div style="background-color:yellow;">center</div>
  <div style="background-color:green;">right</div>
</div>
<div class="centered" style="background-color:blue;">bottom</div>

＆＃13;

Answer 2

您可能希望使用带有网格的框架，例如Twitter Bootstrap：http://getbootstrap.com/或Zurb Foundation：http://foundation.zurb.com/。这些框架提供了12列网格，使div定位更容易处理。

以下示例使用twitter bootstraps网格以您所说的方式定位div：

NSDocumentController openDocument:

＆＃34; row＆＃34; class将创建一个新行，其中的元素将被定位，就像在word文档中按一下输入新行一样。＆＃34; col-md-2＆＃34;是12个列网格中元素将占用多少列的引导语法。在两端将此列偏移5将从列数中减去10，因此中间的剩余两个将保留给该元素。这会将你的div放在中心位置。你提到你希望第二行div全部定位在中心。上面写的代码将给每个div相等的宽度占据屏幕上行的整个长度。围绕代码的容器将在其内部的所有内容周围提供填充，因此它不会触及窗口的边缘。我希望这有帮助。

在html和CSS中定位div

2 个答案: