css - 同一行上有 3 个 div，但移动设备将第 3 行移动到新行

Question

我有 3 个 div 并且想保持在同一行，我能够管理 iphone 6 和 plus 但 iphone 5 它再次移动到下一行。div 1 : 虚线 '--------------'div 2:文本“Hello world”或其他文本div 3 : 虚线 '------------'

<div class="xxx">
  <div style="border-bottom: 2px dotted #ccc;width:37%;display:inline-block;"></div><div style="display:inline-block;"><span>Hello World!!!</span></div><div style="border-bottom: 2px dotted #ccc;width:37%;display:inline-block;"></div>
                    </div>

请建议如何使其通用或我需要根据移动设备进行更改

Answer 1

您可以使用 flexbox，应用以下设置，保持中间元素的宽度不变(不允许它变小)并将其他两个元素定义为 50% 宽，但可以根据需要缩小:

.xxx {
  display: flex;
  align-items: bottom;
}

.x1,
.x3 {
  border-bottom: 2px dotted #ccc;
  width: 50%;
}

.x2 {
  margin-bottom: -5px;
  flex-shrink: 0;
}

<div class="xxx">
  <div class="x1"></div>
  <div class="x2"><span>Hello World!!!</span></div>
  <div class="x3"></div>
</div>