DIV高度的差异

时间:2013-01-25 09:44:25

标签: html css

我有一个主要部门,其中有两个部门

一个是DIV,另一个是DIV

Fiddle Here

HTML

<div class="main">

    <div class="left">
        Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. 
    </div>
    <div class="right">
        some text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text here
    </div
    </div>

CSS就是

body
{
 background-color:black;   
}
.main
{
    width:80%;
    background-color:White;
    opacity:0.9;
    margin-left:auto;
    margin-right:auto;
    margin-top:25px;
}
.left
{
    width:68%;
    float:left;
    background-color:White;
    padding:2%;
    font-family:Calibri;
}

.right
{
    background-color:White;
    width:26%;
    padding:1%;
    float:right;
}

我希望两个DIV必须始终具有相同的高度。无论文本中有多少文本。

现在我的右侧DIV的高度小于DIV,就像小提琴一样。

帮助我。在此先感谢

1 个答案:

答案 0 :(得分:2)

将此添加到.main

height: 30%;
overflow: auto;

链接:Fiddle Example