0

我运行以下代码以创建位于屏幕中间的三列。我遇到的问题是，当我向每个跨度添加不同数量的内容时，一个最终会比其他两个高得多。主页上的背景是黑色的，每个跨度都是白色的。

<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 W3C 文档css 属性。

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 回答