2

好的，我已经看到了static、fluid、static布局，但现在我遇到了需要流体、静态、流体布局的设计。

如：

+-------------------------------+
|             FLUID             |
+-------------------------------+
|      I SHALL                  |
|          TAKE 400             |
|              PIXELS           |
+-------------------------------+
|             FLUID             |
+-------------------------------+

我将如何使用纯 CSS 实现这一目标？

值得注意的是，如果屏幕太小，流体行可能是 0 像素。

至于我所尝试的，还没有 - 不知道从什么开始。

4

3 回答 3

1

您可以display: table-row;在元素上使用。

见小提琴

于 2013-08-29T12:08:40.423 回答
1

实际上，我设法通过绝对定位来解决问题。

HTML：

<div id="header"></div>

<div id="content"></div>

<div id="footer"></div>

CSS：

#header, #footer
{
    background-color: blue;
    position: absolute;

    width: 100%;
    height: 50%;

    top: 0;
    left: 0;

    z-index: -1;
}

#footer
{
    top: auto;
    bottom: 0;
}

#content
{
    height: 400px;

    background-color: black;

    position: absolute;

    width: 100%;
    left: 0;

    top: 50%;
    margin-top: -200px;
}

虽然这个可行，但它似乎只能使用 3 行场景......或者，它总是无法回答 No-SQL 世界著名的问题does it scale?。我的意思是，我怀疑这将适用于 4 行，其中三行是流动的，其中一个具有min-height.

小提琴。

于 2013-08-29T12:13:53.150 回答
0

试试这个简单的布局结构

CSS

.wrapper{
   width:100%;
}
.fluid{
    width:auto;
    background:red;
    padding:20px;
}
.fixed{
    width:360px;
    margin:0 auto;
    background:green;
    padding:20px;
}
于 2013-08-29T12:13:50.360 回答