创建 HTML 和带有固定布局的 css 视图
我试图仅使用纯 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回答
-
繁花不似锦
希望这对您有用： 您可以根据您的要求调整高度和宽度。.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/超文本标记语言<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;}希望能帮助到你！
随时随地看视频慕课网APP
相关分类
Html5