Question

有没有办法让父节点的所有子节点具有相同的宽度而父节点不是块级元素？

基本上我希望jsfiddle中的所有“列”具有相同的宽度，但我不希望容器跨越容器的整个宽度，只需要必要的宽度。

编辑：我正在寻找一种方法来处理动态数量的孩子

Edit2：更新了小提琴和代码，使宽度更加明显

谢谢！

HTML

<div class="container">
  <div>
  Short
  </div>
  <div>
  SomethingSuperLong
  </div>
  <div>
  Ok
  </div>
</div>

https://jsfiddle.net/0g9af1dh/2

Answer 1

检查以下代码段。

var maxWidth = 0;
$('.container > div').each(function() {
  var thisWidth = $(this).outerWidth();
  if(maxWidth < thisWidth) {
    maxWidth  = thisWidth;
  }
});
$('.container > div').width(maxWidth);

.container {
  display: inline-flex;
}

.container > div {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
  <div>
    Short
  </div>
  <div>
    Something super long
  </div>
  <div>
    Ok
  </div>
</div>

编辑：如果您对脚本也是开放的，可能就是这样。否则忽略。

Answer 2

那么，flex的功能，但内联行为？嗯...

.container {
  display: inline-flex;
}

.container > div {
  flex: 1 0 0;
  border: 1px solid red;
}

<div class="container">
  <div>
  Short
  </div>
  <div>
  Something super long
  </div>
  <div>
  Ok
  </div>
</div>

Answer 3

如果您只是希望它们具有相同的尺寸，您可以这样做。

.container > div {
width: 33.3%;
}

如果不是您想要的，请在评论中告诉我，我会更新。

Answer 4

只需将你的CSS更改为

.container {
  display: flex;
}

.container > div {
  flex:1;
  border: 1px solid red;
}

Answer 5

my solution与this solution

非常相似

但在他的解决方案中，他将他们留作display: table，这使得外部div分享质量为display: block

如果您将其更改为使用display: inline-table，则会使用内联字符。为了表明它是内联的，我将test inline放在外部div旁边。

此解决方案需要您为外部容器设置宽度。根据您的问题详情，我认为这对您有用，但如果它不告诉我，我可以调整答案。

动态等宽儿童

5 个答案: