将两个div定位在相同的高度和位置

Question

我有两个div，第一个是父div的30％，第二个是70％。两者都有不同的高度。下面的代码在左侧显示我的屏幕。

<div id="parent">
    <div id="div1">...</div>
    <div id="div2">...</div>
</div>

我想让屏幕像右侧一样。两个div都在同一级别，并且具有相等的高度，这等于较长div的高度。我应该在CSS代码中写什么？

CSS文件：

#parent {
}

#div1 {
    width: 30%;
}

#div2 {
    width: 70%;

}

Answer 1

这是一个jsFiddle，可以完成我认为你正在寻找的东西。两个div都处于同一级别，并且根据要求具有相同的高度（由#div2确定）。

http://jsfiddle.net/QxvWr/4/

<强> HTML

<div class="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

<强> CSS

.wrapper {
    position: relative;
    overflow:hidden;
}
#div1 {
    position: absolute;
    top: 0;
    left: 0;
    width:30%;
    height: 100%; 
    background: yellow;
}
#div2 {
    margin-left:30%;
    width:70%;
    height: 200px; /* change to whatever you want, or remove and have the div's content dictate the size. Note, overflow:hidden was added below for this very reason */
    background: orange;
    overflow:hidden;
}

Answer 2

将div的一个（或两个）的值设置为float：left。这会导致任何内容环绕对象，对象位于内容的左侧。

#div1{
    float: left
}

http://www.w3schools.com/cssref/pr_class_float.asp

Answer 3

检查以下代码是否有效

<style>

#wrapper
{
margin:0px auto;
padding:0px;
width:1000px;

       }
#div1
{
margin:0px;
padding:0px;
width:250px;
float:left;
height:500px;
background-color:red;
}

#div2
{
margin:0px;
padding:0px;
width:750px;
height:500px;
float:right;
background-color:blue;
        }
</style>

<div id="wrapper">
    <div id="div1">...</div>
    <div id="div2">...</div>
</div>

以下是小提琴示例http://jsfiddle.net/QxvWr/5/