我试图仅使用纯 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条经验 获得超12个赞
我建议使用 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 关注
- 104 浏览
添加回答
举报
0/150
提交
取消