Question

我在这里创建了一个页面：http://goo.gl/r7REXn及其包含基本三列布局的网格。这里的问题是，当您从998px缩小屏幕尺寸时，布局看起来并不好看，并且它不会在整个屏幕空间中重复出现。它必须在所有视口上都是平滑的。

这是我的HTML：

<div class="col-1-3">
  <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb1.png">
  <h4>Video #1 - Know Yourself</h4>
  <a href="#">
    <button class="btn btn-block btn-primary">Watch Video</button>
  </a>
</div>

<div class="col-1-3">
  <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb2.png" width="300">
  <h4>Video #2 - Know Yourself</h4>
  <a href="#">
    <button class="btn btn-block btn-primary">Watch Video</button>
  </a>
</div>

<div class="col-1-3">
  <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb3.png">
  <h4>Video #3 - Know Yourself</h4>
  <a href="#">
    <button class="btn btn-block btn-primary">Watch Video</button>
  </a>
</div>

<div class="col-1-3">
  <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb4.png">
  <h4>Video #4 - Know Yourself</h4>
  <a href="#">
    <button class="btn btn-block btn-primary">Watch Video</button>
  </a>
</div>

<div class="col-1-3">
  <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb5.png">
  <h4>Video #5 - Know Yourself</h4>
  <a href="#">
    <button class="btn btn-block btn-primary">Watch Video</button>
  </a>
</div>

<div class="col-1-3">
  <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb6.png">
  <h4>Video #6- Know Yourself</h4>
  <a href="#">
    <button class="btn btn-block btn-primary">Watch Video</button>
  </a>
</div>

这是CSS：

h4 {
  text-align: center;
}
.col-1-3 {
  padding: 10px;
  width: 28%;
  float: left;
margin: 1%;
 border: 1px solid #dedede;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.col-1-3 img {
  width: 100%;
}

.btn-block{
    display: block;
    width: 100%;
}

如何确保布局顺畅，并且在所有浏览器上看起来都不错？

Answer 1

使用媒体查询是制作完整响应式网络的方法。

使用您的代码，您只需添加：

@media only screen and (max-width: 767px) {
  .col-1-3 {width: 44%;}  
}
@media only screen and (max-width: 590px) {
  .col-1-3 {width: 94%;}
}

此css更改或修改或覆盖您达到所需行为所需的任何css属性。我刚刚使用767和590窗口宽度作为示例，但您可以使用您需要的任何断点。

＆＃13;

h4 {
  text-align: center;
}
.col-1-3 {
  padding: 10px;
  width: 28%;
  float: left;
margin: 1%;
 border: 1px solid #dedede;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.col-1-3 img {
  width: 100%;
}

.btn-block{
    display: block;
    width: 100%;
}
@media only screen and (max-width: 767px) {
  .col-1-3 {width: 44%;}
  
}
@media only screen and (max-width: 590px) {
  .col-1-3 {width: 94%;}
  
}

＆＃13;

<div class="col-1-3">
  <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb1.png">
  <h4>Video #1 - Know Yourself</h4>
  <a href="#">
    <button class="btn btn-block btn-primary">Watch Video</button>
  </a>
</div>

<div class="col-1-3">
  <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb2.png" width="300">
  <h4>Video #2 - Know Yourself</h4>
  <a href="#">
    <button class="btn btn-block btn-primary">Watch Video</button>
  </a>
</div>

<div class="col-1-3">
  <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb3.png">
  <h4>Video #3 - Know Yourself</h4>
  <a href="#">
    <button class="btn btn-block btn-primary">Watch Video</button>
  </a>
</div>

<div class="col-1-3">
  <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb4.png">
  <h4>Video #4 - Know Yourself</h4>
  <a href="#">
    <button class="btn btn-block btn-primary">Watch Video</button>
  </a>
</div>

<div class="col-1-3">
  <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb5.png">
  <h4>Video #5 - Know Yourself</h4>
  <a href="#">
    <button class="btn btn-block btn-primary">Watch Video</button>
  </a>
</div>

<div class="col-1-3">
  <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb6.png">
  <h4>Video #6- Know Yourself</h4>
  <a href="#">
    <button class="btn btn-block btn-primary">Watch Video</button>
  </a>
</div>

＆＃13;

<强> JSFIDDLE

已编辑：

然而，当使用浮动响应式布局时，我建议您使用“完美”宽度为20％，25％，33.3333％，50％等，以确保您的内容始终填充容器，如果您想要在元素之间使用边距有许多css解决方案可用于取消woudl打破布局的元素的边距（如果使用margin-right，则像每行的最后一个元素）。作为一个例子值得更多的话（特别是当英语不是我的主要lenguaje）你可以检查这 FIDDLE

Answer 2

我调试了你的代码，发现你的媒体查询和填充有问题，请参考图片。

你有padding-right:245px

我删除了padding-right，它像以前一样居中对齐。

网格必须在所有视口上都是灵活的

2 个答案: