使div彼此靠近[重复]答案

【问题标题】：Make divs be closer to each other [duplicate]使div彼此靠近[重复]
【发布时间】：2018-10-04 10:07:50
【问题描述】：

我有这三个列，问题是第二个比其他的内容多得多，所以它的高度更高。

内容从其他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，我很抱歉，但我已经尝试过解决您之前说过的问题的解决方案，并且有两件事，首先，那里所说的解决方案不能解决我的问题，其次，没有询问与拖放功能的兼容性。还是谢谢

标签： html css bootstrap-4 responsive

【解决方案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 无法完成这项工作。您必须在自己的样式表中对边距进行一些调整。