TA貢獻1824條經驗 獲得超5個贊
.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>
TA貢獻1784條經驗 獲得超9個贊
.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>
TA貢獻1803條經驗 獲得超3個贊
另一種方法是使用網格：
.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>
TA貢獻1817條經驗 獲得超14個贊
在父容器上使用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>
TA貢獻1795條經驗 獲得超7個贊
你可以嘗試這樣的事情：
我剛剛添加了 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>
舉報