我试图只使用图片中的纯html/css来进行这种布局，但不能。
我在这方面花了很多时间，并成功地只使用了表元素。我正在尝试使用基本的DIV/CSS
<html lang="en">
<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，
希望这对您有用：你可以根据自己的要求来调整身高和身高。
.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>我建议使用CSS网格进行布局(网格和flexbox都是纯CSS(，如下所示：https://jsfiddle.net/7L6bpfn1/
HTML
<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;
}
希望它能有所帮助！