html - 三个内联 div : how to make display all three inline OR three block (NOT 2 + 1)?

Question

我有一个包含三个内联 div 的案例，如果它们不适合其容器，则应以内联或列的形式显示。但是，如果容器的宽度不足以使其适合内联，同时又不够窄而无法折叠成一列，则它们将显示为 2+1(两个内联在一个之上)。

如何强制他们显示全部内联，或全部显示在一列中，前提是:

1. 我想避免使用媒体查询。
2. 内部 div 具有固定的像素宽度。

CSS:

.container {
    text-align: center;
    background-color: #FFFFFF;
    margin-bottom: 20px;
}

.narrow {
    width: 200px;
}

.medium {
    width: 400px;
}

.wide {
    width: 600px;
}

.element {
    width: 100px;
    margin: 20px;
    padding: 20px;
    display: inline-block;
    background-color: #FF0000;
    border-radius: 5px;
}

HTML:

<div class="container narrow">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

<div class="container medium">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

<div class="container wide">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

JS fiddle :https://jsfiddle.net/5wLeggy4/1/

Answer 1

不使用媒体查询的唯一方法是使用 flexbox:

https://jsfiddle.net/5wLeggy4/3/

.container {
    text-align: center;
    background-color: #FFFFFF;
    margin-bottom: 20px;
    display: flex;
}

.narrow {
    width: 200px;
    flex-direction: column;
}

.medium {
    width: 400px;
    flex-direction: column;
}

.wide {
    width: 600px;
}

.element {
    width: 100px;
    margin: 20px;
    padding: 20px;
    background-color: #FF0000;
    border-radius: 5px;
    flex-direction: row;
}

<div class="container narrow">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

<div class="container medium">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

<div class="container wide">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>