屏幕缩小时如何垂直转换3个水平项目？

Question

我在尝试将 3 个 div 从水平方向转换为垂直方向时遇到了大问题。下面的代码显示对于大于 1200px 的屏幕，一切正常。我想要的是响应式行为：通过减小浏览器的宽度，3 个 div 一个位于另一个下方。目前，如果有空间，代码将进行调整，以便在第一行中放置 2 个 div。

HTML:

<div class="example">
    <div class="example-item example-item-1">abcabcabcabcabcabcabcabcabcabcabcabcabc</div>
    <div class="example-item example-item-2">123456789012345678901234567890123456789012345678901234567890</div>
    <div class="example-item example-item-3">xyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyz</div>
</div>

和CSS：

.example {
    background-color: black;
    padding: 10px 20px;
    text-align: center;
}
.example-item {
    font-size: 0.7em;
    display: inline-block;
    padding: 10px 10px;
}
.example-item-1 {
    background-color: blue;
}
.example-item-2 {
    background-color: red;
}
.example-item-3 {
    background-color: green;
}

Actual result, what i don't want

Desire result, what i want

Answer 1

您可以使用此 css 代码并根据自己的决定更改 "max-width" 属性：

@media screen and (max-width: 900px) {
  .example-item {
    display: block;
  }
}

jsfiddle： https://jsfiddle.net/mr_seven/1ktcqay4/2/
您可以更改结果区域的宽度以查看如果屏幕宽度更改会发生什么。

Answer 2

老实说，我会考虑使用网格系统，例如引导网格系统或更好的结帐弹性框。

然而，要简单地回答问题，您可以这样做：

.container{
  text-align:center;
}
.box{
  height:20px;
  width:150px;
  border:1px solid black;
  display: block;
  margin:0 auto;
}
@media only screen and (min-width: 768px) {
  .box {
    display: inline-block;
  }
}
.box1{
  background:steelblue;
}
.box2{
  background:indianred;
}
.box3{
  background:coral;
}

<div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

https://jsfiddle.net/y7c96sp8/

屏幕缩小时如何垂直转换3个水平项目？

How to convert 3 horizontal items vertically when screen shrinks?

css

responsive