如何使内联 div 块一个接一个地排列，而不仅仅是在移动设备中查看时缩小宽度

Question

我有一个完全响应的模板，但我不得不添加 3 个内联显示的"div"块。它们都可以调整大小，除非在移动设备上查看时，它们的宽度确实缩小了，因为它们的高度增加了，所有 3 个"div"都变成了长竖条。

我

正在寻找一些建议，相反，当在移动设备中查看时，我可以让这些块彼此低于彼此（如 3 层建筑）。

Answer 1

你可能会追求这样的事情：

.container{
  margin: 0 2% 5px 0;
  display: inline-block;
  width:32%;
  background-color: #cdcdff;
}
.container:last-child{
  margin-right: 0;
}
@media screen and (max-width:500px){
  .container{
    display: block;
    width: 100%;
    margin-right: 0;
  }
}

<div class="parent">
  <div class="container">This is long text and This is long text and This is long text and This is long text and This is long text and This is long text</div><div class="container">This is long text and This is long text and This is long text and This is long text and This is long text and This is long text</div><div class="container">This is long text and This is long text and This is long text and This is long text and This is long text and This is long text</div>
</div>

查看实际效果

要查看此操作，只需点击整页链接并调整浏览器窗口的大小

Answer 2

我不确定我是否理解，但我认为您可以使用媒体查询将divs 的显示属性设置为阻止，这样它们将占据其父宽度的 100%。除非您使用固定宽度和浮动框，否则在这种情况下只需设置：width: 100%

Answer 3

我想在你的div 类中添加一个"clear： both"属性可以帮助你。您还可以使它们显示块...试试看你是否得到你需要的东西！看看这个网站，了解如何只为特定的屏幕尺寸定义一些css：http://www.w3schools.com/css/css_rwd_mediaqueries.asp