请问怎么使用css实现下面的布局

发布网友 发布时间：2022-04-23 03:38

我来回答

共4个回答

热心网友 时间：2022-04-21 16:31

简单来说就是一个css排布的问题（由于你需求的宽高不清楚，我直接使用绝对的简单数据来示范）：

首先一个总盒子，在里面有三个小的盒子。（红色部分不知道你是打算整个网页就是这样的布局，还是局部的，所以我直接当作一个盒子（box）处理，到时候只要改下长宽即可）：

2.接着完成类名赋予，再给右下角的盒子容纳两个小盒子，并赋予类名：

3.源代码到这里就完成了，接着就是css样式（采取的外联）：

效果图（两个小盒子为了看的清楚，没有设置背景仅仅是设了边框）：

你只要修改相应的css数据即可完成布局。

（如果有解释不到位的，可以追问我）

追问

谢谢大神，效果已实现。你的那个class为right的div，我之前没有用，而是分开写的，分开写行不行呢？

热心网友 时间：2022-04-21 17:49

这是我刚写的，应该很容易看懂，纯DIV布局

<div>
<div style="border:1px solid red;">头部 </div>
<div>
<div style="border:1px solid red; float:left; width:50%;">左面DIV左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面左面</div>
<div style="border:1px solid red; float:left; width:40%;">
<div style="border:1px solid red;">右面上DIV</div>
<div style="border:1px solid red;">右面下DIV</div>
</div>
</div>
</div>

效果如图

热心网友 时间：2022-04-21 19:24

不明白，你的箭头是什么意思

热心网友 时间：2022-04-21 21:15

一个大的表格里面嵌套两个小的表格啊，右边那个就右移动 啊