Question

如何并排设置两个div，以便同时增加第一个div的第二个div高度的高度。

我试过这样做：

#content6 > #product-left{
    width: 355px;
    float: left;
    height: auto;
}
#content6 > #product-left ul li a{
    font-size:12px;
}
#content6 > #divide{
    background: url('../images/nav-btn.jpg') repeat-y;
    float: left;
    height: auto;
    width: 20px;
    position:absolute;
    /* position: fixed; */
    display: block;
    /* margin-left: 9px; */
    /*border: 1px solid;*/
}
#content6 > #content-right{
    float: left;
    width: 655px;
    height: 300px;
    margin-left: 10px;
    /*border: 1px solid;*/
}

这是html页面：

<div id="content6">
        <div id="product-left">
            <ul>
                <li>
                    <a href="#">PTFE COATED FIBERGLASS FABRICS</a>
                </li>
                <li>
                    <a href="#">PTFE COATED FIBERGLASS FARBIC SELF-ADHESIVE</a>
                </li>
                <li>
                    <a href="#">PTFE COATED FIBERGLASS BELTS</a>
                </li>
                <li>
                    <a href="#">PTFE COATED FIBERGLASS OPEN MESH DRYER BELTS</a>
                </li>
                <li>
                    <a href="#">SILICON RUBBER COATED FIBERGLASS FABRIC</a>
                </li>
                <li>
                    <a href="#">HIGH TEMP FIBERGALSS WOVEN-NONWOVEN FILTER BAGS</a> 
                </li>
            </ul>
        </div>
        <div id="divide">

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

        </div>
    </div>

请做好必要的事。

Answer 1

将#content6显示为表格及其子容器作为表格单元格显示：

#content6{
    display:table;
}
#product-left{
    width: 355px;
    height: auto;
    display:table-cell;
    background:#EEE;
}
#divide{
    background: url('../images/nav-btn.jpg') repeat-y;
    height: auto;
    width: 20px;
    display: table-cell;
    background:#F00;
}
#content-right{
    width: 655px;
    height: 300px;
    margin-left: 10px;
    background:#CCC;
    display:table-cell;
}

JSFiddle

请注意，由于id s应该是唯一的，因此直接后代CSS选择器在这里是多余的。

如何设置两个div相对？

1 个答案: