javascript - 两个并排的 div，具有最大宽度的流体

Question

我想有两个并排的 DIV，其中左侧 DIV 将始终有文本，而右侧 DIV 可能有也可能没有文本（如果它没有文本，它将根本没有内容） .

如果右 DIV 有文本......左 DIV 的宽度应该扩大到等于其文本的宽度，但最多只能是父 DIV 宽度的 50%。

如果右 DIV 没有文本......左 DIV 的宽度应扩展为等于其文本的宽度，最多为父 DIV 宽度的 100%。

在任何一种情况下，如果 DIV 的一行中的文本过多，则应该换行到下一行。

这可以使用直接的CSS吗？还是我必须做一个 Javascript 解决方案？

谢谢！

Answer 1

只有 CSS 才能做到这一点：

<div class="container">
    <div class="right">Maybe text, maybe no</div>
    <div class="left">Always text here</div>
</div>

和CSS：

.right {
    float: right;
    width: 50%;
}

http://jsfiddle.net/hBAHt/2/

Answer 2

您可以使用 css 和您用来填充页面的任何脚本语言来实现这一点。

这是须藤

if right-div-content-exists
    create left div with style="width:50%";
    create right div with style="width:x%";
else        
    create left div with style="width:100%";

Answer 3

所以我开始思考一个解决方案，不知何故 JavaScript 发挥了作用。

我在这里创建了一个示例 jsFiddle，它按照您的要求工作。

代码：

/* html */

<div class="parent">
  <div class="left">Lorem ipsum dolor sit amet</div>
  <div class="right">Lorem ipsum dolor sit amet</div>
</div>

/* css */

.left{
    width: 100%;
    float: left;
    outline: solid 1px #666;
}

.right{
    width: 50%;
    float: left;
    outline: solid 1px #666;
}

/* js */

if($('.right').text()){
    $('.left').css('width', '50%');
}