没有固定高度的溢出DIV内容

Question

我有两个div: left和right。左边有一段很长的文字。在右边有一些关于文本的注释(更多div)。如果左边的文本比注释长，我就喜欢它。但是当注释比左边的div更大/更长时，我想让右边div的内容溢出。

换句话说:两个没有固定高度的div，让overflow成为正确的那个。

代码是上面的或JSFiddle

<div id="container">
    <div id="left">Some long-long text, allways to show</div>
    <div id="right">Some divs not necessarily show all</div>
</div>

css：

#container {
    background-color:white;
    float:left;
}

#left {
  width: 79%;
  float:left;
}

#right {
  width: 19%; 
  float:right;
  overflow: hidden;
}

但它不起作用。:(

Answer 1

正如Jan在他的上一条评论中建议的那样，我认为你需要使用javascript或jQuery来完成这项工作。

这篇question概述了一种使用javascript的方法，该方法被OP接受，尽管OP没有对他的执行过程发表评论。

我将这个answer中的一个js fiddle修改为一个类似的问题。

它使用以下内容：

CSS

#main{
    width:auto;    

}

#one{
height:auto;
width:200px;
display:inline-block;
float:left;

}
#two{
height:100%;
width:200px;
float:left;
display:inline-block;
overflow: auto;

}

div{
border:1px solid black;
}

Javascript

$(document).ready(function() {

        $("#main").css("height",$("#one").height());


 });

我相信这解决了你想要的结果。

Answer 2

你必须在#left上使用overflow: hidden，而不是在#right上。