CSS Auto top div

Question

需要您关于简单css问题的帮助：

如何使用display自动顶部div：inline block和vertical-align：top with my case below？

这里的CSS：

vertical-align: top;
display: inline-block;
width: 194px;
background: #fff;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
word-wrap: break-word;
padding: 10px;
margin-top: 5px;
-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
text-align: left;

这是fiddle

非常感谢...

Answer 1

使用多列：

<div class="content_wall_column">
    <div class="content_wall">...</div>
    <div class="content_wall">...</div>
</div>

<div class="content_wall_column">
    <div class="content_wall">...</div>
</div>

查看我的JSFiddle。

Answer 2

像这样更改你的css类class_wall

.content_wall
{
vertical-align: top;
display: inline-block;
width: 194px;
background: #fff;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
word-wrap: break-word;
padding: 0px;
margin-top: 0px;
-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
text-align: left;
}

删除了边距和填充;

Demo Fiddle

甚至更好 首先给出填充，然后移除顶部填充  像这样

.content_wall
{
vertical-align: top;
display: inline-block;
width: 194px;
background: #fff;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
word-wrap: break-word;
padding: 10px;
padding-top:0px;
margin-top: 0px;
-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
text-align: left;
 }

Fiddle for this

Answer 3

从margin-top: 5px移除.content_wall，但您可能不希望它们相互接触，因此请勿将其删除，而是将其更改为margin-bottom: 5px。

然后在样式表中添加以下内容：

body, html {
    margin: 0;
    padding: 0;
}

检查the updated fiddle