Question

我有3个div并希望保持同一条线，我能够管理iphone 6和plus但iphone 5它再次移动到下一行。 div 1：虚线＆＃39; --------------＆＃39; div 2：text＆＃39; Hello world＆＃39;或其他文字 div 3：虚线＆＃39; --------------＆＃39;

＆＃13;

<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>

＆＃13;

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

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>

3个div在同一条线上，但移动设备将第3个移到新线

1 个答案: