0

以下のコードを実行して、画面の中央に 3 つの列を作成しています。私が抱えている問題は、各スパンにさまざまな量のコンテンツを追加すると、1 つが他の 2 つよりもはるかに高くなることです。メイン ページの背景は黒で、各スパンは白です。

<div style="width:100%; text-align:center; min-width:1200px;">
<span style="display: inline-block; width:300px; height:300px; background-color:#fff; ">
        Content
</span>
<span style="display: inline-block; width:300px; height:300px; background-color:#fff;">
        Content
</span>

<span style="display: inline-block; width:300px; height:300px; background-color:#fff; margin:0px; padding:0px;">
        Content blah blah blah
</span>
</div>

すべてのスパンが同じ垂直位置になるようにするにはどうすればよいですか。高さをすべて同じ値に設定しました

4

3 に答える 3

5

css プロパティdisplay: table-cell;vertical-align:middleは、ブロックを垂直方向に中央揃えにします。

<div style="width:100%; text-align:center; min-width:1200px;">
<span style="width: 300px; height: 300px; background-color: rgb(255, 255, 255); display: table-cell; vertical-align: middle;">
        Content
</span>
<span style=" width:300px; height:300px; background-color:#fff; display: table-cell; vertical-align: middle;">
        Content
</span>

<span style=" width:300px; height:300px; background-color:#fff; margin:0px; padding:0px; display: table-cell; vertical-align: middle;">
        Content blah blah blah
</span>
</div>
于 2012-09-20T12:08:14.170 に答える
0

columns 最新のブラウザでは、 W3Cdocscssプロパティを使用できます。

html

<div class="container">
    <div class="columns">
      All content
    </div>
</div>

css

.container{
    width:100%;
    min-width:1200px;
    background-color:black;
}
.columns{
    -moz-columns:300px 3;
    -webkit-columns:300px 3;
    columns:300px 3;
    width:900px;
    text-align:center;
    background-color:white;
    margin:0 auto;
}

http://jsfiddle.net/b2fNk/1でのデモ

于 2012-09-20T12:13:01.190 に答える
0 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">

body{
background:black;
}

.mydiv{
margin-left:100px;
width:300px;
float:left;
}
</style>
</head>
<body>


<div style="width:100%; text-align:center; min-width:1200px;">

<div class="mydiv"><span style="display: inline-block; width:300px; background-  color:#fff; ">
       blahblah blah blah blahblah blah blah  blahblah blah blah
</span></div>
<div class="mydiv"><span style="display: inline-block; width:300px; background-color:#fff;">
        Hello Wolrd!blah blah blahblah blah blah
</span>
</div>
<div class="mydiv"><span style="display: inline-block; width:300px; background-color:#fff; margin:0px; padding:0px;">
        Content blah blah blah
</span></div>
</div>

</body>
</html>
于 2012-09-20T12:20:40.343 に答える