网页栅格系统的问题

cqwcns · 发表于 2019-12-2 12:03

容器是一个div，有三个图表，一个图1高度600PX，图2、图3高度是200PX。
问题如图。

微信图片_20191202115616.png

bybaby · 发表于 2019-12-2 12:31

600px的左浮动，200px的右浮动

Ps出来的小赵 · 发表于 2019-12-2 12:45

[Asm] 纯文本查看 复制代码

<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>

cqwcns · 发表于 2019-12-2 12:45

bybaby 发表于 2019-12-2 12:31
600px的左浮动，200px的右浮动

这样应该不行，所有图表都是用户自定义后动态生成的（包括尺寸），尺寸不固定。

cqwcns · 发表于 2019-12-2 12:47

Ps出来的小赵发表于 2019-12-2 12:45
[mw_shl_code=asm,true]
#minw{
width: 802px;

这样应该不行，所有图表都是用户自定义后动态生成的（包括尺寸），尺寸不固定。

cqwcns · 发表于 2019-12-2 12:48

我用的是Bootstrap的栅格系统，栅格系统自身有没有这个选项?

0x3e5 · 发表于 2019-12-2 12:51

本帖最后由 0x3e5 于 2019-12-2 12:52 编辑

试试能不能内层嵌套以下内容适用于bootstrap框架其他框架可能需要修改一下仅作为参考

[HTML] 纯文本查看 复制代码

<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:52

本帖最后由柒渡于 2019-12-2 12:53 编辑

父级两个div，left和right栅格各占一半高都是600px。right里再放两个div，分别是你图表2和图表3。每个独占一行就行了啊。代码不放上来，都不知道你问题出在哪里。

XXXXXMY · 发表于 2019-12-2 13:02

本帖最后由 XXXXXMY 于 2019-12-2 13:10 编辑

[HTML] 纯文本查看 复制代码

 <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盒子的高度，也会根据子元素的高度撑开

0x3e5 · 发表于 2019-12-2 13:04

cqwcns 发表于 2019-12-2 12:48
我用的是Bootstrap的栅格系统，栅格系统自身有没有这个选项?

可以的。这是最终效果（通过栅格布局实现的）

最终效果

中间为什么会有空隙是因为 col 自带的padding 如果别扭可以自行设置属性覆盖掉即可

css盒子模型

最后附上演示代码

[HTML] 纯文本查看 复制代码

<!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>

帐号		自动登录	找回密码
密码			注册[Register]

[求助] 网页栅格系统的问题