html - block 或单行元素

Question

有没有办法在所有 3 个元素都有可用空间时在一行中显示 3 个元素，如果没有，则在单独的一行中显示它们中的每一个？

因此，如果我可以显示 3 个内联行，但我想避免连续 2 个元素和下一行中的最后一个元素。 前提是最好不要使用媒体查询。

Answer 1

您可以使用 Javascript 或 jQuery 来实现，如下所示。它获取每个元素的宽度。如果它们的总和大于包装元素的宽度，它将元素从 display: inline-block 转换为 display: block，从而使它们 100% 宽:

$(document).ready(function() {
  var L1 = $(".x1").width();
  var L2 = $(".x2").width();
  var L3 = $(".x3").width();
  var sum = L1 + L2 + L3;
  var availableSpace = $(".wrapper").innerWidth();
  if (availableSpace < sum) {
    $(".x").css('display', 'block');
  };
})

body,
html {
  margin: 0;
}

.x {
  display: inline-block;
  padding: 10px;
  border: 1px solid #bbb;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
<div class="x x1">11111111111 11111111111111 11111111111111</div><div class="x x2">2222222222222 2222222222222 222222222222</div><div class="x x3">333333333333 333333333333333333</div>
</div>

将片段全屏显示以查看效果。如果这三个元素周围没有父元素，您也可以在 jQuery 函数中使用 body 而不是 .wrapper DIV。