Question

我必须构建几乎标准的3列布局

-----header-----
-s1-content-s2--
-----footer-----

sidebar1和2有width:25%，内容框有50％。它工作得很完美。

但区别在于侧栏1。在某些子页面上，绝对没有内容。我将sidebar1的css设置为max-width:25%;，当没有内容出现时div有0px x 0px。差不多完成了。

最终效果是当sidebar1为空时将内容div拉伸到75％。

是否可以在没有丑陋的CSS攻击或使用JS的情况下执行此操作？我检查了很多解决方案，大多数都没有正常工作。

Answer 1

你必须使用float或display: table，我更喜欢使用后者，而是使用自己的。{/ p>

<div id="wrapper">
    <div class="sidebar-one">
        some (or no) content
    </div>
    <div class="content">
        main content
    </div>
    <div class="sidebar-two">
        sidebar two
    </div>
</div>

#wrapper { display: table; }
#wrapper>div { display: table-cell; vertical-align: top; }
#wrapper .sidebar-one { max-width: 25%; }
#wrapper .sidebar-two { width: 25%; }

Answer 2

这会处理左侧或右侧的可选内容。

jsFiddle

<强> HTML

<header></header>

<div id="wrapper">
    <div id="left-sidebar">
        Optional Content
    </div>

    <div id="content">
        <p>To sailors, oaths are household words; they will swear in the trance of the calm, and in the teeth of the tempest; they will imprecate curses from the topsail-yard-arms, when most they teeter over to a seething sea; but in all my voyagings, seldom have I heard a common oath when God's burning finger has been laid on the ship; when His "Mene, Mene, Tekel Upharsin" has been woven into the shrouds and the cordage.</p>
    </div>

    <div id="right-sidebar">
        Optional Content
    </div>
</div>

<footer></footer>

<强> CSS

#wrapper {
    display: table;
}

#left-sidebar, #content, #right-sidebar {
    display: table-cell;
    vertical-align: top;
}

header, footer {
    background: pink;
    width: 100%;
    height: 2em;
}

#content {
}

#left-sidebar {
    background: lime;
    max-width: 25%;
}

#right-sidebar {
    background: red;
    max-width: 25%;
}

3或2列布局取决于实际内容

2 个答案: