如何使用CSS控制3个div,实现如下图的布局?

发布网友发布时间：2022-04-06 11:56

我来回答

共6个回答

懂视网时间：2022-04-06 16:18

本篇文章给大家带来的内容是关于如何使用CSS3中属性box-direction控制布局顺序？（代码教程），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

在CSS3弹性盒子模型中，我们可以使用box-direction属性来设置弹性盒子内部中“子元素”的排列顺序。

语法：box-direction

说明：box-direction属性取值如下：

normal 正向显示（默认值）

reverse 反向显示

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>CSS3 box-direction属性</title>
 <style type="text/css">
 body
 {
  display:-webkit-box;
  -webkit-box-orient:horizontal; /*定义盒子元素内的元素从左到右流动显示*/
  -webkit-box-direction:reverse; /*定义盒子元素内的元素反向显示*/
 }
 div{height:100px;line-height:100px;}
 #box1{background:red;}
 #box2{background:blue;}
 #box3{background:yellow;}
 </style>
</head>
<body>
 <div id="box1">盒子1</div>
 <div id="box2">盒子2</div>
 <div id="box3">盒子3</div>
</body>
</html>

在浏览器预览效果如下：

热心网友时间：2022-04-06 13:26

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
  body,html,div{
  margin:0;
  padding: 0;
  width: 100%;
  height: 100%;
  }
.lt,.lb{
width: 200px;
background-color: green;
}
.lt{
margin-bottom: 5px;
height: 600px;
}
.lb{
height:calc(100% - 605px);
}
.rt{
position: absolute;
top: 0;
left:205px;
height: 100%;
background-color: green;
width: calc(100% - 205px)
}
  </style>
</head>
<body>
<div class="lt" id="lt"></div>
<div class="lb"></div>
<div class="rt"></div>
</body>
</html>

热心网友时间：2022-04-06 14:44

中间那个左浮动
~ float：left；即可

热心网友时间：2022-04-06 16:18

初步想法是用，绝对定位做
其他方法暂时没想到，这关系到列和行的混合，要是4个div方法就很多了

热心网友时间：2022-04-06 18:10

CSS部分————————————
<style type="text/css">
.wrap{width:500px;height:auto;}
.f_l{float:left;width:200px;}
.abox{width:100%;height:300px;}
.bbox{width:100%;height:200px;margin-top:15px;}
.f_r{float:right;width:260px;}
</style>

HTML部分。————————————
<div class="wrap">
<div class="f_l">
<div class="abox"></div>
<divclass="bbox"></div>
</div>
<div class="f_r"></div>
</div>

CSS里面的宽高自己设置，原理就这样，方法多样的。

热心网友时间：2022-04-06 20:18

感觉应该要用到float