html - 如何最好地布局 4 个 div 彼此相邻的标题，并且应该适合移动设备？

Question

我使用以下配置开发的网页的标题布局如下:

max-width: 1050px;
height: 150px;

最好的布局方式是什么，以便它尽可能适合移动设备。

我的想法是这样的:每个div都有它的宽度，如果它的宽度是固定的，并且也是display: inline-block。但这不太适合移动设备，因为我必须添加响应 block 。

有人有更好的主意吗？

这是我开始的内容:https://jsfiddle.net/6ohe3hgp/ 但不确定它的方向是否正确，因为它也应该是移动的，并且通过移动，我可能会将这些元素堆叠在一起。

Answer 1

我想不出比使用 flexbox (您也用它标记了问题)更好的方法

当全部排成一行时，它们将具有基于内容最多的高度相同的高度，当垂直堆叠时，即在移动设备上，它们会折叠到其内容以使滚动最小化。

Updated fiddle

.container {
  max-width: 1050px;
  margin: 0 auto;         /*  will center the container on wide screen  */
  display: flex;
}
.one {
  width: 100px;
  background-color: #f66;
}
.two {
  width: 200px;
  background-color: lightgreen;
}
.three {
  flex: 1;                /*  this makes it take all the available space  */
  color: white;
  background-color: black;
}
.four {
  width: 200px;
  background-color: lightblue;
}
@media screen and (max-width: 600px) {  
 .container {
    display: block;
  } 
 .container > div {
    width: 100%;
  }
}

<div>
  <div class="container">
    <div class="one">
      Fixed width
    </div>
    <div class="two">
      Fixed width, with several<br>
      lines of text that will<br>
      make all the other get<br>
      equal height
    </div>
    <div class="three">
      Dynamic width
    </div>
    <div class="four">
      Fixed width
    </div>
  </div>
</div>