1

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

如何使用显示自动顶部 div：内联块和垂直对齐：顶部与下面的案例？

这里的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;

这是小提琴

非常感谢帮助...

4

3 回答 3

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。

于 2013-10-10T04:26:26.177 回答
0

margin-top: 5px从中删除.content_wall，但您可能不希望它们相互接触，所以不要删除它，而是将其更改为margin-bottom: 5px。

然后将以下内容添加到您的样式表中：

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

检查更新的小提琴

于 2013-10-10T06:15:14.930 回答
0

像这样更改类 content_wall 的 CSS

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

移除了边距和内边距；

演示小提琴

或者甚至更好地先给填充，然后像这样删除顶部填充

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

小提琴为此

于 2013-10-10T04:30:10.920 回答