Question

我有这个小提琴http://jsfiddle.net/thiswolf/RGe24/3/，可以在这里看到http://jsfiddle.net/thiswolf/RGe24/3/show，我希望图像决定其他div的高度。例如，橙色div应拉伸到同一高度作为图像div，所以应该是中间div。

这是html

<section class="les_head">
    <article class="col-sm-3  les_pink faux_head">
        <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2009/1/23/1232730572620/Isla-Mae-Lubbock-002.jpg" width="100%" />
    </article>

    <article class="col-sm-7 les_pink  main_head">
        <span class="the_name ">Ed,Edd and Eddy - Totally Bonkers </span> 
        <hr/> 
        <span class="the_icons">
            <i class="glyphicon icon-twitter"></i> / 
            <i class="glyphicon icon-facebook"></i> / 
            <i class="glyphicon icon-skype"></i> / 
            <i class="glyphicon icon-google-plus"></i> / 
            <i class="glyphicon icon-dribbble"></i> / 
            <i class="glyphicon  icon-github"></i></span>
    </article>

    <article class="col-sm-2 les_orange les_mail">
        <i class="the_mail glyphicon glyphicon-envelope"></i>
        <span class="mail_text">Mail</span>
    </article>
</section>

这是css

.les_pink {
    background-color:pink;
}
.les_orange {
    background-color:orange;
}
.les_head {
    display:inline-block;
    border:1px solid red;
}
.faux_head {
    position:relative;
    height:auto;
    display:inline-block;
}
.faux_head > img {
}
.les_mail {
}
.les_mail > i {
    font-size:40px;
}
.the_mail {
    display:block;
    margin-left:28%;
}
.mail_text {
    margin-left:33%;
}

如果没有将橙色框填充到底部，我怎样才能实现这一目标？

Answer 1

尝试this fiddle，基本的概念是你需要在一个包装器中包含你想要自动调整大小的任何DIV，这个包装器必须定义其高度，以便它的子节点可以计算相对于'100％'高度。

#wrapper{
    height:200px;
}

.pink, .yellow, img{
    float:left;
    height:100%;
}
.pink{
    background:pink;

}
.yellow{
    background:yellow;
}

Answer 2

section{
    display:table;
}
section_buttom{
    display:table-row;
}
article {
    width:200px;
    border:1px solid #333;
    display:table-cell
}

请在文章中添加一个div部分按钮而不是在文章中的地方，并申请这个css我认为适合你。

Answer 3

另一种选择是使用jQuery获取一个元素的高度，然后将其他元素的高度设置为该高度。使用代码类的示例：

$(document).ready(function() {
  var new_height = $(".faux_head").height();
  $(".main_head").height(new_height);
  $(".les_mail").height(new_height);
});

制作一个div决定了其他div的高度

3 个答案: