Html 栅格在所有视口上都必须灵活

我在这里创建了一个页面：它是一个包含基本三列布局的网格。这里的问题是，当你把屏幕的尺寸从998px缩小到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>

---

我怎样才能确保它是平滑的布局，在所有浏览器上看起来都很好

使用媒体查询是制作完全响应的网站的方法

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

@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窗口宽度作为示例，但您可以使用所需的任何断点

h4{
文本对齐：居中；
}
.col-1-3{
填充：10px；
宽度：28%；
浮动：左；
利润率：1%；
边框：1px实心#dedede；
-webkit边界半径：7px；
-moz边界半径：7px；
边界半径：7px；
}
.col-1-3 img{
宽度：100%；
}
.btn块{
显示：块；
宽度：100%；
}
@仅介质屏幕和（最大宽度：767px）{
.col-1-3{宽度：44%；}
}
@仅介质屏幕和（最大宽度：590px）{
.col-1-3{宽度：94%；}
}

视频#1-了解你自己
视频#2-了解你自己
视频#3-了解你自己
视频#4-了解你自己
视频#5-了解你自己
视频#6-了解你自己

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

在这里，您有

右填充：245px

我删除了右边的

填充

，它像以前一样居中对齐。

---

您应该使用媒体查询进行查询。为了让所有尺寸的屏幕都清晰可见，你能给我看看吗？

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