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

简单来说就是一个css排布的问题(由于你需求的宽高不清楚,我直接使用绝对的简单数据来示范):首先一个总盒子,在里面有三个小的盒子。(红色部分不知道你是打算整个网页就是这样的布局,还是局部的,所以我直接当作一个盒子(box)处理,到时候只要改下长宽即可):2.接着完成类名赋予,再给右下角...
请问怎么使用css实现下面的布局
简单来说就是一个css排布的问题(由于你需求的宽高不清楚,我直接使用绝对的简单数据来示范):

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

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

3.源代码到这里就完成了,接着就是css样式(采取的外联):

效果图(两个小盒子为了看的清楚,没有设置背景仅仅是设了边框):
你只要修改相应的css数据即可完成布局。
(如果有解释不到位的,可以追问我)
2017-07-08
这是我刚写的,应该很容易看懂,纯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>效果如图

2017-07-08
不明白,你的箭头是什么意思2017-07-08
一个大的表格里面嵌套两个小的表格啊,右边那个就右移动 啊2017-07-08
mengvlog 阅读 596 次 更新于 2025-12-18 02:43:16 我来答关注问题0
檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部