Question

目标：在网站的内容区域中，我需要制作一个仅限装饰的列，其旁边是两个div（包含图像）的高度。

问题：该列要么没有高度，要么是我给它的属性，要么只有第一个兄弟div的高度而没有填充。我试过身高：100％，最小身高：100％。还尝试制作父位置：绝对和设置顶部：0和底部：0。

代码：

＆＃13;

.row {
    position: relative;
    overflow: hidden;
    border: #000 3px dashed;
}
#colLeft {
    float: left;
    width: 15%;
    height: 100%;
    background-color: red;
}
#B1 {
    float: left;
    width: 84%;
    height: 100px;  /* this will actually be the height of the img */
    background-color: green;
 }
 #B2 {
     width: 84%;
     height: 100px;  /* this will actually be the height of the img */
     float: left;
     background-color: #ff0;
 }

＆＃13;

    <div class="row">
        <div id="colLeft"></div>
        <div id="B1">
            <img src="foo">
        </div>
        <div id="B2">
            <img src="bar">
        </div>
</div>

＆＃13;

＆＃13; 在此先感谢您的帮助。

我想要的是什么：http://i.stack.imgur.com/sgr5g.png 我得到了什么：http://i.stack.imgur.com/lS63m.png

Answer 1

在您的代码中，您height: 100px; /* this will actually be the height of the img */

中的img .row

.row {
    position: relative;
    overflow: hidden;
    border: #000 3px dashed;
    height: 200px;
}
#colLeft {
    float: left;
    width: 15%;
    height: 100%;
    background-color: red;
}

你也可以这样做，摆弄http://jsfiddle.net/DIRTY_SMITH/QwZuf/260/

在此示例中，我将 200px 的高度设置为 100％的行和高度到列

max(ranking)

Answer 2

您应该将左栏更改为position: absolute。

＆＃13;

.row {
    position: relative;
    overflow: hidden;
    border: #000 3px dashed;
}
#colLeft {
    float: left;
    width: 20%;
    position: absolute;
    height: 100%;
    background-color: red;
}
#B1 {
    float: right;
    width: 80%;
    height: 100px;
    background-color: green;
}
#B2 {
     width: 80%;
     height: 100px;
     float: right;
     background-color: #ff0;
}

＆＃13;

<div class="row">
        <div id="colLeft"></div>
        <div id="B1">
            <img src="foo">
        </div>
        <div id="B2">
            <img src="bar">
        </div>
</div>

＆＃13;

Answer 3

这是我发现的替代解决方案，也很有效。

.row {
    display: table-row;
}
#colLeft {
    display: table-cell;
    width: 15%;
    background-color: red;
}
#B1 {
    display: table-cell;
    width: 84%;
    height: auto; 
    background-color: green;
 }
 #B2 {
     display: table-cell;
     width: 84%;
     height: auto;
     background-color: #ff0;
 }

如何使<div>列延伸到旁边两个<div>的高度？

3 个答案: