Question

我希望列出3 div列。左边的那个和右边的一个有内容和可变长度。中间的那个是分隔线。我的CSS是：

html
{
    background:url(../img/texture.png) 50% 0 repeat #fff;
}

body
{
    font:13px/20px "Trebuchet MS", Helvetica, sans-serif;
    position:relative;
    min-width:960px;
}

html, body 
{
    height:100%;
}

    .main
    {
        background-color:#f8f8f8;
        padding:2px;
        border:1.5px solid #000000;
        border-radius:1em;
        -webkit-border-radius:1em;
        -moz-border-radius:1em;
        -o-border-radius:1em;
        margin:auto;
        width:950px;
        box-shadow:0 0 20px #585858;
        word-wrap:break-word;
    }

    section#content
    {
        padding:10px 0px;
        overflow:hidden;
    }

    section#content #text
    {
        margin:10px 20px 0px;
        text-align:center;
    }

        #text #login
        {
            width:40%;
            margin-left:5%;

        margin-right:5%;
        float:left;
        text-align:left;
    }

    #text #registration
    {
        width:40%;
        margin-left:5%;
        margin-right:5%;
        float:right;
        text-align:left;
    }

    #text #divider_ver
    {
        float:left;
        height:100%;
        width:1px;
        background:#000000;
    }

我的JSP：

<body>
<div class="main">
    <section id="content">
        <div id="testo">
            <div id="text">
                <div id="login">
                    ...
                </div>
                <div id="divider_ver"></div>
                <div id="registration">
                    ...
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </section>
</div>
</body>

问题是分隔符不会出现。如果我将其高度设置为：min-height:100px;，它将具有固定高度（100px）。我希望它在另一个div之间的高度更高，但我不能这样做。

Answer 1

http://jsfiddle.net/2mjet/1/

下面：

CSS更改

section#content #text
{
    margin:10px 20px 0px;
    text-align:center;
    overflow: hidden;
}

#text #divider_ver
{
    float:left;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
    width:1px;
    background:#000000;
}

使用+padding容器的简单-margin overflow:hidden，但这是一个很好的记忆技巧。

多列div的可变高度

1 个答案:

CSS更改