Question

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

内容来自其他htmls。

另外，我将不得不让divs拖放。 dropa所以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>

编辑

这就是我现在的代码，我有两个问题，在resposive它显示不同的panel2和panel3＆amp; panel1，因为持续时间是连续的，而其他的不是。另一个问题是拖放不能正常工作。

非常感谢

Answer 1

您可以将前两个框插入一个div中，将较大的一个插入另一个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>

Answer 2

附加的代码段显示了一个解决方案，使用＆＃34; CSS grid＆＃34;。然后，您可以通过更改边距值来控制CSS中的边距。

＆＃13;

.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;

}

＆＃13;

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

＆＃13;

Answer 3

因为我看到你正在使用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

Answer 4

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

Answer 5

您需要在一个＆＃34; col-md-6＆＃34;中插入2个左框。一个＆＃34; col-md-6＆＃34;然后你将高度设置为所有框

＆＃13;

#left_panel,#right_panel{
	  border:2px solid red;
	  margin:30px 0;
}

#left_panel{
	  height: 200px;
}

#right_panel{
	  height: 430px;
}

＆＃13;

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

＆＃13;

使div更接近彼此

5 个答案: