1

簡単なCSSの質問についてあなたの助けが必要です:

display: inline ブロックと vertical-align: top を使用してトップ 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

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 に答える
0

から削除margin-top: 5pxし.content_wallますが、おそらく互いに接触させたくないので、削除せずに に変更しmargin-bottom: 5pxます。

次に、スタイルシートに次を追加します。

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

更新されたフィドルを確認する

于 2013-10-10T06:15:14.930 に答える