Question

我正在尝试重新创建：http://jsfiddle.net/MGRdP/6/

html, body{
  height:100%;
}

.table {
    width: 100%;
    display: table;
    height:100%;
}

.cell {
    border: 2px solid black;
    vertical-align: middle;
    display: table-cell;
    height:100%;
}

<div class="table">
    <div class="cell">
        <p>Text</p>
    </div>
</div>
<div class="table">
    <div class="cell">
        <p>Text</p>
    </div>
</div>

使用Neat，但我的div不会扩展到视口高度的100％。使用检查员，我找不到任何差异。显然有些事情在这里。

有人可以提供正确的标记，以便让我实现小提琴吗？

Answer 1

如果您想要并排两个div（如小提琴），只需将每个div设为width:50%和float:left

＆＃13;

html, body{
  height:100%;
}

.table {
    width: 50%;
    display: table;
    height:100%;
    float:left;
}

.cell {
    border: 2px solid black;
    vertical-align: middle;
    display: table-cell;
    height:100%;
}

＆＃13;

<div class="table">
    <div class="cell">
        <p>Text</p>
    </div>
</div>
<div class="table">
    <div class="cell">
        <p>Text</p>
    </div>
</div>

＆＃13;

Answer 2

.table {
    width: 50%;
    display: table;
    height:100%;
    float:left;
}

这个css让两个div并排。您也可以使用

display:inline-block;
vertical-align:top;
width:49%;

并排布局; 要使内容使用margin:0 auto为孩子和两个高度作为视口使用 -

height:100vh

jsfiddle link

100％高度div与居中的内容

2 个答案: