我試圖僅使用純 html/css 進行此布局，如圖所示，但不能。我在這方面花了很多時間，并且只成功地處理了表格元素。我正在嘗試使用基本的 DIV /CSS 來做到這一點<html> <style> table, th, td { border: 1px solid black; } #upleft { width: 100px; height: 300px; background: red; float: left; } #upright { width: 300px; height: 200px; background: blue; float: left } #below { height: 300px; width: 400px; background: green } </style> <body> <p style="font-size: 1.5em;"> </p> <p> </p> <table class="editorDemoTable" style="width: 581px; height: 101px;"> <tbody> <tr style="height: 49px;"> <td style="width: 619px; height: 49px;"> <p> </p> <p> </p> </td> <td style="width: 423px; height: 49px;"><strong></strong></td> </tr> <tr style="height: 230px;"> <td style="width: 19px; height: 230px;"> <div id="target"></div> </td> </tr> </tbody> </table> <p></p> </body> </html>請建議。BR,
2 回答
繁花不似錦
TA貢獻1851條經驗 獲得超4個贊
希望這對您有用： 您可以根據您的要求調整高度和寬度。
.editorDemoTable {
border: 1px solid black;
width: 100%;
}
.firstRow .firstTD {
border: 1px solid red;
width: 25%;
height: 200px;
}
.firstRow .secondTD {
border: 1px solid red;
width: 75%;
}
.secondRow .firstTD {
border: 1px solid red;
width: 25%;
height: 500px;
}
.secondRow .secondTD {
border: 1px solid red;
width: 75%;
height: 500px;
}
<table class="editorDemoTable">
<tbody>
<tr class="firstRow">
<td class="firstTD">
<input type="text" placeholder="search...">
</td>
<td class="secondTD"><strong></strong></td>
</tr>
<tr class="secondRow">
<td class="firstTD">
<div id="target"></div>
</td>
<td class="secondTD">lower right</td>
</tr>
</tbody>
</table>
使用Flex：
* {
margin: 0;
padding: 0;
border: 0;
}
#MainDiv {
display: flex;
flex-direction: column;
height: 900px;
width: 100%;
margin: 5px;
}
#txtsearch {
margin-top: 10px;
margin-left: 10px;
border: 1px solid black;
height: 30px;
width: 60%;
}
.underline {
margin-top: 10px;
margin-left: 10px;
height: 30px;
width: 60%;
font-weight: bold;
}
.Rows {
display: flex;
flex-direction: row;
}
.Topleft {
height: 200px;
width: 30%;
border: 1px solid red;
}
.TopRight {
height: 200px;
width: 70%;
border: 1px solid red;
}
.BottomLeft {
height: 700px;
width: 30%;
border: 1px solid red;
}
.BottomRight {
height: 700px;
width: 70%;
border: 1px solid red;
}
<div id="MainDiv">
<div class="Rows">
<div class="Topleft">
<input type="text" id="txtsearch" placeholder="search...">
<p class="underline">
-------------------------------------
</p>
</div>
<div class="TopRight">Top Right</div>
</div>
<div class="Rows">
<div class="BottomLeft">Bottom Left</div>
<div class="BottomRight">Bottom Right</div>
</div>
</div>
紅顏莎娜
TA貢獻1842條經驗 獲得超13個贊
我建議使用 CSS 網格進行布局（網格和 Flexbox 都是純 CSS），如下所示：https://jsfiddle.net/7L6bpfn1/
超文本標記語言
<div id = "grid">
<div id = "div1">
1
<div id = "search">
Search
</div>
</div>
<div id = "div2">
2
</div>
<div id = "div3">
3
</div>
<div id = "div4">
4
</div>
</div>
CSS
#grid {
display: grid;
grid-gap: 5px;
grid-template-columns: 40vw 60vw;
grid-template-rows: 30vh 70vh;
grid-template-areas:
"upper-left upper-right"
"lower-left lower-right";
}
#div1 {
grid-area: upper-left;
background-color: red;
}
#div2 {
grid-area: upper-right;
background-color: red;
}
#div3 {
grid-area: lower-left;
background-color: red;
}
#div4 {
grid-area: lower-right;
background-color: red;
}
#search {
background-color: blue;
color: white;
margin: 10px;
}
希望能幫助到你！
- 2 回答
- 0 關注
- 171 瀏覽
添加回答
舉報
0/150
提交
取消