分隔div的CSS列

Question

我正在使用https://pinterest.com和
的模板构建平台 我有这样的html结构：

<div class="main">
    <div class="content">
         <div class="content_publisher">
         </div>
         <div class="content-text">
         </div>
    </div>
</div>

我的style.css是这样的：

body {
    width:1358px;
}

.main {
    column-width:339.33px;
    column-gap: 0;
    column-count:4;
    position:relative;
    top:50px;
    width:100%;
}

.content {
    display:block;
    margin-bottom:10px;
    width:337px;
    -webkit-box-shadow:inset 0px 0px 10px;
}

我的页面分为4列...看看图像，你会明白我想要什么exaclty ..  https://i.stack.imgur.com/fPfDp.png正如您在列末尾看到的那样，该列将内容 div中的div分隔开来。

Answer 1

在display: inline-block上使用.content。

＆＃13;

＆＃13;

body {
  width: 1358px;
}

.main {
  column-width: 339.33px;
  column-gap: 0;
  column-count: 4;
  position: relative;
  top: 50px;
  width: 100%;
}

.content {
  display: inline-block;
  margin-bottom: 10px;
  width: 337px;
  -webkit-box-shadow: inset 0px 0px 10px;
  height: 200px;
  background: #eee;
}
.content:nth-child(odd) {
  height: 150px;
}

＆＃13;

<div class="main">
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;