中心 div 切入浮动的左 div答案

【问题标题】：center div cutting into floated left div中心 div 切入浮动的左 div
【发布时间】：2021-12-05 03:05:47
【问题描述】：

我正在尝试水平对齐三个 div。中心 div 正在切入左侧 div。我做错了什么？

    <div>
      <div style={{width:"100px", border:"solid blue", float:"left"}}>Left some text some text some text</div>
      <div style={{width:"100px",  border:"solid green", float:"right"}}>Right</div>
      <div style={{border:"solid red", margin:"0 auto"}}>Center</div>
      <div style={{clear:"both"}}></div>
    </div>

中心也与右侧的绿色框重叠，但边框大小相同，因此您看不到它。

【问题讨论】：

这些答案解决了你的问题吗？

标签： html css reactjs css-float

【解决方案1】：

给红色的divmargin-left:100px：

<div>
      <div style="width:100px;border:1px solid blue;float:left">Left some text some text some text</div>
      <div style="width:100px;border:1px solid green;float:right">Right</div>
      <div style="border:1px solid red;margin-left:100px">Center</div>
      <div style="clear:both"></div>
    </div>

【讨论】：

【解决方案2】：

也许您应该使用 flexbox ？我认为它比"float" 概念更方便和更现代。这是我的提议。我希望你会满意 ;-) 如果你愿意，你可以从width 切换到flex 属性，它们在css. 中被评论

.wrapper {
  display: flex;
  align-items: start;
  justify-content: space-between;
  width: 100%;
  text-align: center;
}

.blue {
  width: 100px;
/*   flex: 1; */
  border:1px solid blue;
}

.green {
  width: 100px;
/*   flex: 1; */
  border:1px solid green;
}

.red {
  width: 100%;
/*   flex: 8; */
  border:1px solid red;
  margin: 0 auto;
}

<div class="wrapper">
  <div class="blue">Left some text some text some text</div>
  <div class="red">Center</div>
  <div class="green">Right</div>
</div>

【讨论】：