Html CSS - div居中,左对齐,右对齐

如何制作主容器的整个水平长度的顶部 div,同时保持接下来的两个 div,.left并且.right彼此弯曲?

看起来像这样——

https://img1.sycdn.imooc.com/652e3efb0001672a06410432.jpg

ibeautiful
浏览 215回答 5
5回答

沧海一幻觉

.main {&nbsp; border: 1px solid red;&nbsp; display: inline-flex;}.main div.top {&nbsp; border: 1px solid orange;&nbsp; width: auto;&nbsp; display: inline-block;}.main div.left {&nbsp; border: 1px solid blue;}.main div.right {&nbsp; border: 1px solid green;}<html><body>&nbsp; <div class="main">&nbsp; &nbsp; <div class="top">&nbsp; &nbsp; &nbsp; <h1>top</h1>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="left">&nbsp; &nbsp; &nbsp; <h1>left</h1>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="right">&nbsp; &nbsp; &nbsp; <h1>right</h1>&nbsp; &nbsp; </div>&nbsp; </div></body></html>

千万里不及你

.left 和 .right 的任意宽度.main {&nbsp; &nbsp; &nbsp; border: 1px solid red;&nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; flex-wrap: wrap;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; .main div.top {&nbsp; &nbsp; &nbsp; border: 1px solid orange;&nbsp; &nbsp; &nbsp; width: auto;&nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; flex: 1 1 100%;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; .main div.left {&nbsp; &nbsp; &nbsp; border: 1px solid blue;&nbsp; &nbsp; &nbsp; flex: 1 1 auto;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; .main div.right {&nbsp; &nbsp; &nbsp; border: 1px solid green;&nbsp; &nbsp; &nbsp; flex: 1 1 auto;&nbsp; &nbsp; }&nbsp; &nbsp; <div class="main">&nbsp; &nbsp; &nbsp; <div class="top">&nbsp; &nbsp; &nbsp; &nbsp; <h1>top</h1>&nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <div class="left">&nbsp; &nbsp; &nbsp; &nbsp; <h1>left 11111111</h1>&nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <div class="right">&nbsp; &nbsp; &nbsp; &nbsp; <h1>right</h1>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>

繁星点点滴滴

另一种方法是使用网格:.main&nbsp; {&nbsp; display: grid;&nbsp; grid-template-columns: 1fr 1fr;}.main&nbsp; .top {&nbsp; grid-column: 1/3;}.main&nbsp; {&nbsp; border: 1px solid red;&nbsp; display: grid;&nbsp; grid-template-columns: 1fr 1fr;&nbsp; grid-gap: 4px;&nbsp; padding: 4px;}.main&nbsp; .top {&nbsp; border: 1px solid orange;&nbsp; grid-column: 1/3;}.main&nbsp; .left {&nbsp; border: 1px solid blue;}.main .right {&nbsp; border: 1px solid green;&nbsp;}<div class="main">&nbsp; <div class="top">&nbsp; &nbsp;&nbsp; &nbsp; <h1>top</h1>&nbsp; </div>&nbsp; <div class="left">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <h1>left</h1>&nbsp; </div>&nbsp; <div class="right">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <h1>right</h1>&nbsp; </div>&nbsp; &nbsp;</div>

大话西游666

在父容器上使用display: flex;和flex-wrap: wrap,在第一个子容器和flex-grow: 1其他子容器上使用 100% 宽度,或者在第二个和第三个 DIV 上使用百分比宽度。* {box-sizing: border-box;}.main&nbsp; {&nbsp; border: 1px solid red;&nbsp; display: flex;&nbsp; flex-wrap: wrap;}.main&nbsp; div.top {&nbsp; border: 1px solid orange;&nbsp; width:100%;}.main&nbsp; div.left {&nbsp; border: 1px solid blue;&nbsp; width: 40%;}.main div.right {&nbsp; border: 1px solid green;&nbsp;&nbsp; width: 60%;}<html><body>&nbsp; &nbsp; <div class="main"><div class="top">&nbsp; &nbsp;<h1>top</h1>&nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;<div class="left">&nbsp; &nbsp; <h1>left</h1></div><div class="right">&nbsp; &nbsp; <h1>right</h1></div>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; </div></body></html>

一只萌萌小番薯

你可以尝试这样的事情:我刚刚添加了 2 个额外的divs 如果这不是问题?#MainDiv {&nbsp; width: 200px;&nbsp; border: 1px solid red;}.main {&nbsp; width: auto;&nbsp; display: flex;&nbsp; flex-direction: column;}#lower {&nbsp; display: flex;&nbsp; flex-direction: row;}.left,.right {&nbsp; width: 100px;&nbsp; border: 1px solid black;}<html><body>&nbsp; <div id="MainDiv">&nbsp; &nbsp; <div class="main">&nbsp; &nbsp; &nbsp; <div class="top">&nbsp; &nbsp; &nbsp; &nbsp; <h1>top</h1>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div id="lower">&nbsp; &nbsp; &nbsp; &nbsp; <div class="left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>left</h1>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="right">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>right</h1>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></body></html>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5