最宽子元素

提示

问题: 父元素内多个子元素,子元素根据内容确定宽度,子元素和最宽的子元素等宽

方案一、InlineBlock 方案

---

解决方案: 将父元素设置为display: inline-block, 子元素宽度为 width: 100% 。这样的话, 可以实现最宽子元素布局。

实时编辑器

function Test(props) {
  const container = {
    display: "inline-block",
    backgroundColor: "red"
  }
  const item = {
    width: "100%",
    backgroundColor: "blue"
  }

  return (
     <div style={ container }>
        <div style={ item }>xxxxxxxxx</div>
        <div style={ item }>xxxxxxxxxxxxx</div>
        <div style={ item }>xxxxxxxxx</div>
        <div style={ item }>xxxxxxxxxxxxxxxxx</div>
        <div style={ item }>xxxxxxxxxxxxxxxxxxxxxxxxxx</div>
     </div>
  );
}

结果

Loading...