Question

我必须实现这个内容：

<div class="content">
    <div class="row">
        <div class="cell">&nbsp;</div>
        <div class="cell" id = "up_lft"></div>
        <div class="cell" id = "up_rgh"></div>
        <div class="cell"></div>
    </div>

    <div class="row">
        <div class="cell">&nbsp;</div>
        <div class="cell" id = "dwn_lft"></div>
        <div class="cell" id = "dwn_rgh"></div>
        <div class="cell">&nbsp;</div>

    </div>
</div>

和CSS

.content{
        display: table;
        margin-top:22px;
        width:100%; 
}

.row {
    display: table-row;
    width:100%;
 }

.cell {
    display: table-cell;
    width:auto;
    vertical-align:top;
}

#up_lft{
    width:100px;
    min-width:100px;
    height:125px;
    background-color:#8E9090;
    outline: 1px solid white;
}

#up_rgh{
    width:100px;
    min-width:100px;
    height:125px;
    background-color:#8E9090;
    outline: 1px solid white;
}

#dwn_lft{
    width:100px;
    min-width:100px;
    height:125px;
    background-color: #394249;
    outline: 1px solid white;


}

#dwn_rgh{
    width:100px;
    min-width:100px;
    height:125px;
    background-color:#872434;
    outline: 1px solid white;
}

在这里小提琴： http://jsfiddle.net/reJ7e/

我选择css display：table只是因为我需要这些盒子留在页面的中心，无论屏幕分辨率如何。我还需要在右下角div之后添加一些东西（一个小高度div，它自身延伸到右边距的屏幕并有一个背景图像）

问题在于，如果我尝试在该div中放置任何其他东西，则所有设计都向左移动。乱。有什么建议吗？我愿意改变css显示：table - 但我不知道怎么做（所有4个盒子都留在中心）请注意，我还有一个标题，其菜单宽度高于那些boxex

由于

Answer 1

您可以避免使用显示表并使用position：absolute并转换元素的原点以使其完全位于页面中间：

position: absolute;

transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);

top: 50%;
left: 50%;

给定此样式的任何元素都将保留在页面的中心..如果您希望它保持在窗口的中心，只需从position：absolute更改为position：fixed。

Here's an illustration fiddle

CSS：display：表格在添加内容时浮动

1 个答案: