Question

我知道这应该是CSS存在的根本原因，但我认为CSS失败了。证明我错了是你的工作。

举个例子：

<html>
<head>
    <title>div test</title>
    <style>
        html {
            font: bold 20px Arial;
            color: white;
        }

        #container {
            border: 1px dotted black;
            width: 90%;
        }

        .blue {
            background-color: blue;
            opacity:0.5;
            float: left;
        }

        .red {
            background-color: red;      
            opacity:0.5;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="blue">Here is some text</div><div class="red">&nbsp</div>
    </div>
</body>
</html>

并且这样做

红色和蓝色div共享同一行
红色和蓝色div不重叠
红色和蓝色div的组合宽度是#container
蓝色div 自动占用尽可能多的空间，以容纳其中的文本，不多或少。
红色div 自动增长/缩小以占用#container中的剩余空间，以便＃3和＃4都满足

我一直在努力做到这一点 - 应该是什么 - 非常简单的事情，现在大约3个小时没有成功。我能做到的唯一方法是将风格和内容交织在一起，并根据蓝色div中的文本数量调整每个div的宽度。

Answer 1

根据您在说明中发布的代码，您的代码似乎应该有效。我在这里验证了它：

http://jsfiddle.net/3nSwT/1/

（仅用于澄清的颜色）

您想要修复的方案有什么问题？

修改

此代码按预期工作。我认为。：）

http://jsfiddle.net/3nSwT/3/

Answer 2

Here是一种基于表格的方法，我认为它可以做你想要的。

<div id="container">
    <table><tr>
        <td class="red">Here is some text in the red div.</td>
        <td  class="blue">
        Some text in blue div. Some text in blue div. Some text in blue div. 
         Some text in blue div.     
        </td>
     </tr>
 </table>

 td.red { white-space: nowrap; width: 1%;   background: red;   }
 td.blue { background: blue; }

唯一轻微的污泥迫使红色柱子的宽度增加到1％，因此它总是占用恰好必要的空间。

如果您可以放弃IE6支持，并且需要将所有内容都设置为“语义”，则可以将构造转换为一系列display: table-* div元素：

    <div class="table"><div class="tr">
    <div class="td red">Here is some text in the red div.</div>
    <div class="td blue">
    Some text in blue div. Some text in blue div. Some text in blue div. 
    Some text in blue div.     
    </div>
  </div>

.table { display: table }
.tr { display: table-row }
.td { display: table-cell }

但我个人认为最终的div汤很可怕，而且<table>标签更清晰，更好用，即使它不是语义上正确的选择。

Answer 3

这曾经很难，但现在使用Pekka提到的方法相当简单。更具体一点：

从.blue中删除浮动并添加以下行：

#container {
    border: 1px dotted black;
    width: 90%;
    display: table;
}

.red, .blue {
    display: table-cell;
}

这符合您的所有条件，包括隐式标准，当您将窗口大小调整为小于#container宽度时，它会开始将文本换行到框的大小，如果您在一侧放置较长的文本，另一方面，浏览器会相应调整大小。

甚至可以在IE8中使用。它是CSS2.1的一部分，IE8实现得相当彻底，但忽略了CSS3。 IE7和IE6需要黑客攻击。有关此方法和其他方法的更多信息，请参阅http://www.gunlaug.no/contents/wd_additions_22.html，包括IE6 / 7的黑客攻击。这是我认为难以理解的唯一部分。

IE8的另一个问题 - 确保HTML中有standards doctype。如果不这样做，这将失败。我最喜欢的是HTML5 doctype - ＆lt;！doctype html＆gt;

使用此方法而非老式表格可以为移动网站重复使用相同的HTML，并且如果需要，可以将.red和.blue显示在彼此之下。

使用CSS将内容与样式分开

3 个答案: