Question

我正在尝试自动地使宽度彼此相等，这样我就可以拥有任意数量的元素和可变文本。在这种情况下，元素的大小不一致。有什么想法吗？

HTML：

<div class="tempTable">
    <a href="a"  class="childThing" >A</a>
    <a href="b" class="childThing ">sdfdssdfsdfdsfdsfdsffsdfsdfsdf </a>
    <a href="c"  class="childThing" >sdfsdf</a>
    <a href="d"   class="childThing" >sdfdsf</a>
</div>

CSS：

.tempTable {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-align: start;
    -moz-box-align: start;
    box-align: start;
    max-width: 1000px;
}

.childThing {
   -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    text-align: center;
    display: block;
    color: #fff ;
    background-color: #4C839D;
    font-size:15px;
    border:none;
    position: relative;
    outline:0;
}

Answer 1

你可以拥有这样的CSS：

#wrapper {
    display: table;
    table-layout: fixed;

    width:90%;
    height:100px;
    background-color:Gray;
}
#wrapper div {
    display: table-cell;
    height:100px;
}

这是一个工作版本： http://jsfiddle.net/g4dGz/1028/

Answer 2

尝试：

.tempTable {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  max-width: 1000px;
}
.childThing {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  text-align: center;
  color: #fff ;
  background-color: #4C839D;
  font-size: 15px;
  border: none;
  outline: 0;
}

演示：http://codepen.io/anon/pen/GJNxXZ

另请参阅：CSS3 Flexbox: display: box vs. flexbox vs. flex

Answer 3

block 属性的display 值会使元素的框断行并占用它的容器的整个宽度。这是p和div元素的默认值。

相反，请使用display属性使您的元素像表格元素一样，因为它们的框大小绑定在一起。

<强> HTML：

<div class="table">
    <a href="a">A</a>
    <a href="b">Lorem ipsum sit amet</a>
    <a href="c">C</a>
    <a href="d">D</a>
</div>

<强> CSS：

.table a {
    display: table-row;
}

Fiddle

Answer 4

...宽度自动相等

如果您设置了flex-basis属性，它将修复宽度;
如果需要，word-wrap: break-word将包装文本。

检查 fiddle

为什么我的元素宽度不相等？

4 个答案: