自动对焦高度取决于另一个

我有以下情况我想Div2高度调整取决于Div3的内容我该怎么做？自动对焦高度取决于另一个

---------------------------------- 
.  DIV1      . 
. --------- ------------------ . 
. .  . .    . . 
. . DIV2 . .  DIV3 . . 
. .  . .    . . 
. .  . .    . . 
. --------- -----------------. . 
.--------------------------------

来源

2012-02-16 steve jobs

我想你想要显示DIV2和DIV3的相同高度。通过CSS，你可以如下做到这一点：

HTML以上

<div class="wrapper"> 
    <div class="child_1">First Div content goes here</div> 
    <div class="child_2">Second Div content goes here</div> 
</div>

CSS

.wrapper { 
     width: 960px; 
     overflow: hidden; 
     margin: 0px auto; 
    } 

    .child_1, .child_2 { 
     padding-bottom: 1000px; 
     margin-bottom: -1000px; 
     width: 50%; 
     float: left; 
    } 

    .child_1 { 
     background: #f00; 
    } 

    .child_2 { 
     background: #0f0; 
    }

代码会显示您的div高度平等，如果他们在高度1000像素不同，因为每码。你可以改变1000px，如果你认为在某些情况下差异可能更大。它将支持所有浏览器

其他明智的，你可以使用它的JavaScript。你需要找到最长的div的高度，并在其他div中设置相同的高度。

来源

2012-02-16 11:16:57 Tarun

您可以使用display: table-cell CSS属性，虽然被警告，这是CSS3，没有很多的支持，任何超过IE8以上。

实施例：

<div class="div1"> 
    <div class="div2"></div> 
    <div class="div3"></div> 
</div>

CSS：

.div1 { 
    display: table; 
} 
.div1 > div { 
    border: 1px solid #000; 
    width: 200px;  
    display: table-cell; 
} 
.div3 { 
    height: 500px; 
}

小提琴：http://jsfiddle.net/97NJR/

来源

2012-02-16 10:23:12

它是一个非常好的解决方案，但是如果我已经使用float：left，我可以保持使用它还是我必须重新设计？ – 2012-02-16 10:52:40

尝试使用CSS属性display: table-cell。看到这个jsFiddle。

编辑

使用花车，试试这个更新jsFiddle
或者同样这个one。两者都提供了一个优雅的解

来源

2012-02-16 10:27:31 jacktheripper

它是一个非常好的解决方案，但是如果我已经使用float：left，我能继续使用它还是我必须重新设计？ – 2012-02-16 10:52:29

看到我更新的答案 – jacktheripper 2012-02-16 10:56:06

和双倍更新的一个:) – jacktheripper 2012-02-16 10:58:43

自动对焦高度取决于另一个

回答

相关问题