0

如何制作主容器全水平长度的顶部 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>

4

5 回答 5

1

另一种方法是使用网格：

.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>

于 2020-03-29T15:45:59.383 回答
1

在父容器上使用display: flex;和flex-wrap: wrap，在第一个子容器和flex-grow: 1其他子容器上使用 100% 宽度，或者在第二个和第三个 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>

于 2020-03-29T15:47:43.227 回答
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>

于 2020-03-29T16:32:06.127 回答
0

您可以使用两个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>

于 2020-03-29T15:42:46.600 回答
0

你可以尝试这样的事情：

div如果这不是问题，我只是添加了 2 个额外的 s？

#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>

于 2020-03-29T15:44:57.760 回答