Question

我尝试使用CSS制作一个漂亮的网格布局但不能让它们显示为3行，单个列行为33.3333％

我想要的网格样式是this。

这是我到目前为止的代码;

HTML：

    <section id="web">
   <div class="row">
   <span class="web large-3 columns"><img src="images/1.gif"></span>
   <span class="web large-3 columns"><img src="images/2.jpg"></span>
   <span class="web large-3 columns"><img src="images/3.png"></span>
   </div>
   <div class="row">
   <span class="web large-3 columns"><img src="images/4.jpg"></span>
   <span class="web large-3 columns"><img src="images/5.png"></span>
   <span class="web large-3 columns"><img src="images/6.jpg"></span>
   </div>
</section>

CSS：

section { display: block; }

section#web {
background: #f8f8f8;
padding: 80px 0;
}

.row {
width: 100%;
margin: 0 auto;
max-width: 1144px;
}

span.web {
margin-bottom: 20px;
text-align: center;
position: relative;
border: 1px solid #e3e3e3;
}

.row .large-3 {
position: relative;
width: 33.33333%;
}

.row .columns {
position: relative;
padding-left: .83333em;
padding-right: .83333em;
width: 100%;
float: left;
}

我的JSFiddle。

Answer 1

您将宽度设置为像素。相反，您应该使用百分比，例如宽度：33％。当你为边距应用20px时，这种布局的33.3是一个糟糕的选择。也许28％会好的。

小提琴：http://jsfiddle.net/Vfffg/119/

.container > div {
  margin: 20px;
  width: 28%;
  height: 100px;
  background: blue;
  float: left;
  color: #fff;
  text-align: center;
}

使用图像创建CSS网格布局

1 个答案: