Question

我想有两个并排的DIV，其中左侧DIV将始终具有文本，而右侧DIV可能有也可能没有文本（如果没有文本，则没有内容在所有）。

如果右侧DIV有文字 ...左侧DIV的宽度应扩大到等于其文字的宽度，但最多只能达到父DIV宽度的50％。< / p>

如果右侧DIV没有文字 ...左侧DIV的宽度应扩展为等于其文字宽度，最多为父DIV宽度的100％。< / p>

在任何一种情况下如果DIV的一行上有太多的文字，它应该换行到下一行。

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

谢谢！

Answer 1

您可以使用css和用于填充页面的任何脚本语言来实现此目的。

这是sudo

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 2

所以我开始考虑一个解决方案，不知何故JavaScript起到了作用。

我创建的an example jsFiddle here按您要求的方式工作。

代码：

/* 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%');
}

Answer 3

仅使用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/

两个并排的div，最大宽度的流体

3 个答案: