Question

我想像这样停止div，但是在一个div中的A和D之内，一个div中的B和E以及html中的其他div中。

我也可以选择使用bootstrap和jquery。

代码演示：

    class Matrice{

    int size;
    int **val;

    public:
        Matrice(int size1)
        {
            val = new int* [size1];
            size = size1;
            for (int i = 0; i < size1; i++)
            {
                 val[i] = new int[size1];
            }

            for (int i = 0; i < size1; i++){
                 for (int j = 0; j < size1; j++)
                 {
                    val[i][j] = j;
                 }
            }     
        }

        ~Matrice()
        {
            delete []val;
            cout<<"Destroyed matrix! \n";
        }
  };

我使用过Ankit的解决方案，但div相互混合。

给出最小高度之后它很顺利：

我不想给出最小高度。

Answer 1

你要做的事情叫做Masonry Layout。其基本内容如下：

HTML：

<div class="masonry">
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
   <div class="item">...</div>
   ...
   ...
   <div class="item">...</div>
</div>

CSS：

.masonry { /* Masonry container */
    column-count: 4;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

消息来源：http://w3bits.com/css-masonry/

Answer 2

试试这个：

＆＃13;

<!DOCTYPE html>
<html>
<head>
   <style>
.div{
    width: 90%;
    border: 2px solid;
    height: 50px;
    margin: 5px;}
</style>
</head>
<body style="font:15px Verdana;">
<div style="width:10%;display: -webkit-box;">
	<div style="width:50%;margin-right: 5px;"><div class="div">a</div>
    <div class="div">b</div>
    <div class="div">c</div></div>
<div style="width:50%;">
    <div class="div" style="height: 75px;">d</div>
    <div class="div" style="height: 75px;">e</div></div>
</div>
</body>
</html>

＆＃13;

Answer 3

试试这个，希望这会有所帮助。

＆＃13;

.main {
  display: inline-block;
  height: 150px;
}

.row {
  float: left;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.col {
  width: 20px;
  border: 1px solid #000;
  flex: 1 auto;
  margin: 1px;
}

＆＃13;

<div class="main">
  <div class="row">
   <div class="col">
    <span>A</span>
   </div>
   <div class="col">
    <span>D</span>
   </div>
   <div class="col">
    <span>B</span>
   </div>
  </div>
  <div class="row">
   <div class="col">
    <span>E</span>
   </div>
   <div class="col">
    <span>C</span>
   </div>
</div>

＆＃13;

并排创建div而不会在主div内相互影响

3 个答案: