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函数中使用.wrapper而不是body DIV。

阻止或单行元素

1 个答案: