Html CSS - div中心，左，右对齐[重复]答案

【问题标题】：Html CSS - div center, and left, right alignment [duplicate]Html CSS - div中心，左，右对齐[重复]
【发布时间】：2020-07-09 23:57:02
【问题描述】：

如何制作主容器全水平长度的顶部 div，同时保持接下来的两个 div .left 和 .right 相互弯曲？

看起来像这样 -

.main {
  border: 1px solid red;
  display: inline-flex;
}

.main div.top {
  border: 1px solid orange;
  width: auto;
  display: inline-block;
}

.main div.left {
  border: 1px solid blue;
}

.main div.right {
  border: 1px solid green;
}

<html>

<body>
  <div class="main">
    <div class="top">
      <h1>top</h1>
    </div>

    <div class="left">
      <h1>left</h1>
    </div>

    <div class="right">
      <h1>right</h1>
    </div>
  </div>
</body>

</html>

【问题讨论】：

您愿意添加更多div 来实现这一目标吗？或者您希望这种行为同时保持相同数量的元素
@UtsavPatel 我愿意添加新的 div。

标签： html css flexbox

【解决方案1】：

.left 和 .right 的任意宽度

.main {
      border: 1px solid red;
      display: flex;
      flex-wrap: wrap;
    }
    
    .main div.top {
      border: 1px solid orange;
      width: auto;
      display: inline-block;
      flex: 1 1 100%;
    }
    
    .main div.left {
      border: 1px solid blue;
      flex: 1 1 auto;
    }
    
    .main div.right {
      border: 1px solid green;
      flex: 1 1 auto;
    }

    <div class="main">
      <div class="top">
        <h1>top</h1>
      </div>
  
      <div class="left">
        <h1>left 11111111</h1>
      </div>
  
      <div class="right">
        <h1>right</h1>
      </div>
    </div>

【讨论】：

【解决方案2】：

您可以使用两个div 来创建其他部分。

.main  {
  border: 1px solid red;
  display: flex;
flex-direction:column;
}

.main  div.top {
  border: 1px solid orange;
  width:auto; 
}

.main  div.left {
  border: 1px solid blue;
  flex:1
}

.main div.right {
  border: 1px solid green;
  flex:1 
}
   .main__section2 {
display:flex
   }

<html>
<body>
  <div class="main">
    <div class="main__section1">
      <div class="top">
        <h1>top</h1>
      </div>
    </div>
    <div class="main__section2">
      <div class="left">
        <h1>left</h1>
      </div>
      <div class="right">
        <h1>right</h1>
      </div>
    </div>
  </div>
</body>
</html>

【讨论】：

【解决方案3】：

在父容器上使用 display: flex; 和 flex-wrap: wrap，在第一个子容器上使用 100% 宽度，在其他子容器上使用 flex-grow: 1，或者在第二个和第三个 DIV 上使用百分比宽度。

* {
box-sizing: border-box;
}
.main  {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
}

.main  div.top {
  border: 1px solid orange;
  width:100%;
}

.main  div.left {
  border: 1px solid blue;
  width: 40%;
}

.main div.right {
  border: 1px solid green; 
  width: 60%;
}

<html>
<body>
    <div class="main">
<div class="top">   <h1>top</h1>
   </div>
      
 <div class="left">    <h1>left</h1>
</div>

<div class="right">    <h1>right</h1>
</div>
     
    </div>
</body>
</html>

【讨论】：

【解决方案4】：

另一种方法是使用网格：

.main  {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.main  .top {
  grid-column: 1/3;
}

.main  {
  border: 1px solid red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 4px;
  padding: 4px;
}

.main  .top {
  border: 1px solid orange;
  grid-column: 1/3;
}

.main  .left {
  border: 1px solid blue;
}

.main .right {
  border: 1px solid green; 
}

<div class="main">
  <div class="top">   
    <h1>top</h1>
  </div>
  <div class="left">    
    <h1>left</h1>
  </div>
  <div class="right">    
    <h1>right</h1>
  </div>   
</div>

【讨论】：

【解决方案5】：

你可以试试这样的：

如果这不是问题，我刚刚添加了 2 个额外的 divs？

#MainDiv {
  width: 200px;
  border: 1px solid red;
}

.main {
  width: auto;
  display: flex;
  flex-direction: column;
}

#lower {
  display: flex;
  flex-direction: row;
}

.left,
.right {
  width: 100px;
  border: 1px solid black;
}

<html>

<body>
  <div id="MainDiv">
    <div class="main">
      <div class="top">
        <h1>top</h1>
      </div>
      <div id="lower">
        <div class="left">
          <h1>left</h1>
        </div>

        <div class="right">
          <h1>right</h1>
        </div>
      </div>


    </div>
  </div>

</body>

</html>

【讨论】：