网页栅格系统的问题
容器是一个div，有三个图表，一个图1高度600PX，图2、图3高度是200PX。问题如图。
600px的左浮动，200px的右浮动
<style>
#minw{
width: 802px;
margin:0 auto;
}
#left{
background: red;
width: 600px;
height: 600px;
float: left;
}
#right{
height: 600px;
background: #333;
float: right;
}
#r-top{
background: blue;
height: 200px;
width: 200px;
}
#r-botton{
background: #758aaa;
height: 200px;
width: 200px;
margin-top: 90px;
}
</style>
</head>
<body>
<div id="minw">
<div id="left"></div>
<div id="right">
<div id="r-top"></div>
<div id="r-botton"></div>
</div>
</div>
</body>
</html> bybaby 发表于 2019-12-2 12:31
600px的左浮动，200px的右浮动
这样应该不行，所有图表都是用户自定义后动态生成的（包括尺寸），尺寸不固定。 Ps出来的小赵 发表于 2019-12-2 12:45
#minw{
width: 802px;
这样应该不行，所有图表都是用户自定义后动态生成的（包括尺寸），尺寸不固定。 我用的是Bootstrap的栅格系统，栅格系统自身有没有这个选项? 本帖最后由 0x3e5 于 2019-12-2 12:52 编辑
试试能不能内层嵌套 以下内容适用于bootstrap框架 其他框架可能需要修改一下 仅作为参考
<div class="row">
<div class="col-md-6">图1</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">图2</div>
</div>
<div class="row">
<div class="col-md-12">图3</div>
</div>
</div>
</div> 本帖最后由 柒渡 于 2019-12-2 12:53 编辑
父级两个div，left和right栅格各占一半高都是600px。right里再放两个div，分别是你图表2和图表3。每个独占一行就行了啊。代码不放上来，都不知道你问题出在哪里。 本帖最后由 XXXXXMY 于 2019-12-2 13:10 编辑
<style>
.flex{
display:flex;
}
</style>
<div class="flex">
<div class="img-1">1</div>
<div class="img-2">
<div class="img-2-1">2-1</div>
<div class="img-2-2">2-2</div>
</div>
</div>
这样？不定宽高，宽度自己撑开，flex盒子的高度，也会根据子元素的高度撑开 cqwcns 发表于 2019-12-2 12:48
我用的是Bootstrap的栅格系统，栅格系统自身有没有这个选项?
可以的。这是最终效果（通过栅格布局实现的）
中间为什么会有空隙是因为 col 自带的padding 如果别扭可以自行设置属性覆盖掉即可
最后附上演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" >
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.pic1{
height: 300px;
width: 100%;
background: lightblue;
}
.pic2{
height: 150px;
width: 100%;
background: skyblue;
}
.pic3{
height: 150px;
width: 100%;
background: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="pic1">
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="pic2"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="pic3"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
页:
[1]