使div彼此靠近[重复]
Posted
技术标签:
【中文标题】使div彼此靠近[重复]【英文标题】：Make divs be closer to each other [duplicate] 【发布时间】：2018-10-04 10:07:50 【问题描述】：我有这三个列，问题是第二个比其他的内容多得多，所以它的高度更高。
How it shoud be
That´s the result i have
内容从其他htmls收费。
此外，我必须让 div 拖放，所以 flexbox 对我的问题没有好处。
$('.component-container').sortable(
cursor: 'move',
placeholder: 'ui-state-highlight',
start: function(e, ui)
ui.placeholder.width(ui.item.find('.panel').width());
ui.placeholder.height(ui.item.find('.panel').height());
ui.placeholder.addClass(ui.item.attr("class"));
<div id="fila" class="row center" style="text-align: center;">
<div class="pan col-md-6 col-sm-12">
<div class="row">
<div class="pan col-md-12 col-sm-12 order-sm-first box" id="panel1">
</div>
</div>
<div class="row">
<div class="pan col-md-12 col-sm-12 box" id="panel3">
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="pan col-md-12 col-sm-12 big-box" id="panel2">
</div>
</div>
</div> 这就是我现在拥有我的代码的方式，我有两个问题，在响应中它显示不同的 panel2 和 panel3&panel1 因为最后一个是连续的，而其他的不是。另一个问题是拖放不能正常工作。
非常感谢
【问题讨论】：
使用 CSS 网格更好地控制 div 布局。 Bootstrap 4 中没有 clearfix 类，列必须是 row 的直接子级（不是 row>col>col）。 Read the docs 嗨 ZymSystem，我很抱歉，但我已经尝试过解决您之前说过的问题的解决方案，并且有两件事，首先，那里所说的解决方案不能解决我的问题，其次，没有询问与拖放功能的兼容性。还是谢谢 【参考方案1】：附加代码-sn-p 显示了一个解决方案，使用“CSS 网格”。然后，您可以通过更改边距值来控制 CSS 中的边距。
.wrapper
display: grid;
grid-template-columns:
40%
1fr
;
grid-template-rows:
150px
150px
;
grid-template-areas:
"left-upper-box right-box"
"left-lower-box right-box"
;
.left-upper-box
grid-area: left-upper-box;
background-color: grey;
margin: 15px 0px 15px 10px;
.left-lower-box
grid-area: left-lower-box;
background-color: grey;
margin: 15px 0px 15px 10px;
.right-box
grid-area: right-box;
background-color: grey;
margin: 15px 50px 15px 50px;
<!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" href="index.css">
</head>
<body>
<div class="wrapper">
<div class="left-upper-box"></div>
<div class="left-lower-box"></div>
<div class="right-box"></div>
</div>
</body>
</html>【讨论】：
首先感谢您的回答，但是那个网格系统不会和bootstrap网格系统产生冲突吗？ 你必须测试它们是否冲突。不同的是，bootsrap 是一个框架，而 CSS grid 是一个内置在 CSS 内部的网格系统。如果您不熟悉所有技术细节，我建议您使用一种解决方案来处理网格布局。 作为参考，当前浏览器支持：caniuse.com/#feat=css-grid【参考方案2】：因为我看到您正在使用 Bootstrap。 您需要做的就是在一行中有两列。
然后在一列（在您的情况下为左侧）添加两行。
<div id="fila" class="row center" style="text-align: center;">
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-12 order-sm-first" id="panel1">
hello
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12 col-sm-12" id="panel2">
Hello
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="col-md-12 col-sm-12" id="panel3">
helllo
<br/>
<br/>
hello
</div>
</div>
</div>
可以看到输出here
【讨论】：
【参考方案3】：您可以在一个 div 中插入前 2 个框，在另一个 div 中插入较大的框。这样你就可以实现你想要的布局。试试这个代码。
<div id="fila" class="row center" style="text-align: center;">
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-md-12 order-sm-first" id="panel1">
panel 1
</div>
<div class="col-md-12" id="panel2">
panel 2
</div>
</div>
</div>
<div class="col-md-6 col-sm-12"> panel 3 </div>
</div>
【讨论】：
它使 div 按我想要的方式显示，但是当我尝试拖放它们时，它会拖动整个 div "col-md-"6 而不是应该的 "panel1" 或 "panel2"移动 我不相信拖放的问题是因为 css，但是我对答案中的代码进行了一些更改，希望能解决您的拖放问题。跨度> 【参考方案4】：您需要在一个“col-md-6”中插入 2 个左框，在一个“col-md-6”中插入 1 个右框，然后将高度设置为所有框
#left_panel,#right_panel
border:2px solid red;
margin:30px 0;
#left_panel
height: 200px;
#right_panel
height: 430px;
<!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 href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div id="fila" class="row center" style="text-align: center;">
<div class="col-md-6 col-sm-6">
<div class="col-md-12 col-sm-12 order-sm-first " id="left_panel">panel</div>
<div class="col-md-12 col-sm-12 " id="left_panel">panel</div>
</div>
<div class="clearfix "></div>
<div class="col-md-6 col-sm-6">
<div class="col-md-12 col-sm-12" id="right_panel">panel</div>
</div>
</div>
</body>
</html>【讨论】：
【参考方案5】：<div id="fila" class="row center" style="text-align: center;">
<div class="col-md-6 col-sm-12">
<div class="col-md-12 col-sm-12 order-sm-first " id="panel1">
</div>
<div class="col-md-12 col-sm-12" id="panel2">
</div>
</div>
<div class="clearfix "></div>
<div class="col-md-6 col-sm-12">
<div class="col-md-12 col-sm-12" id="panel3">
</div>
</div>
</div>【讨论】：
Bootstrap 无法完成这项工作。您必须在自己的样式表中对边距进行一些调整。以上是关于使div彼此靠近[重复]的主要内容，如果未能解决你的问题，请参考以下文章
使DIV 100％在另一个DIV 100％高度内拉伸高度[重复]