Fatal编程技术网
  • html/
  • Html 使用CSS将内容与样式分开

Html 使用CSS将内容与样式分开

html css

Html 使用CSS将内容与样式分开,html,css,Html,Css,我知道这应该是CSS存在的根本原因，但我认为CSS在这方面失败得很惨。你的工作就是证明我错了 举个例子： <html> <head> <title>div test</title> <style> html { font: bold 20px Arial; color: white; } #container {

我知道这应该是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测试
html{
字体：粗体20px Arial；
颜色：白色；
}
#容器{
边框：1px点黑色；
宽度：90%；
}
蓝先生{
背景颜色：蓝色；
不透明度：0.5；
浮动：左；
}
瑞德先生{
背景色：红色；
不透明度：0.5；
}
以下是一些文本
就这样吧

  • 红色和蓝色的div共用一条线
  • 红色和蓝色div不重叠
  • 红色和蓝色div的组合宽度为#容器的100%
  • 蓝色div会自动占据容纳其内部文本所需的最大空间，不多也不少
  • 红色div会自动增大/缩小以占用#容器中的剩余空间，从而满足#3和#4的要求
    • 我已经试着做了三个小时了，这应该是一件非常简单的事情，但没有成功。我能做到这一点的唯一方法是将样式和内容交织在一起，并根据蓝色分区中的文本量调整每个分区的宽度。

    从您发布的代码和您的描述来看，您的代码似乎应该可以工作。我在这里验证过：

    （只是为了澄清而使用颜色）

    您希望修复的场景有什么问题

    编辑：

    这段代码按照您的预期工作。我想……）

    是一种基于表格的方法，我认为它符合您的要求

    <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; }
    但我个人认为结果div-soup很糟糕，
    标记是一个更干净、更好的解决方案，尽管它在语义上不是正确的选择。

    这过去很难，但现在使用Pekka所提到的方法相当简单。更具体地说：

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

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

.red, .blue {
    display: table-cell;
}
    这与您的所有条件相匹配，包括隐式条件，即当您将窗口的大小调整为小于#容器宽度时，它将开始将文本包装到框的大小，并且如果您将较长的文本放在一边而不是另一边，浏览器将相应地调整大小

    甚至在IE8中也能工作。它是CSS2.1的一部分，IE8非常彻底地实现了这一点，但忽略了CSS3。IE7和IE6需要黑客。有关此方法和其他方法的更多信息，包括IE6/7的黑客攻击，请参阅。这是我唯一会考虑的部分。

    另一个问题是IE8——确保你的HTML中有一个。如果你不这样做，这将失败。我最喜欢的是HTML5 doctype-

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

    据我所知，这只能使用
    table
    或
    display:table-*
    。后者在IE6中不起作用，因为您已经从div中删除了不透明度属性，所以看起来它才起作用。如果重新添加，可以看到蓝色和红色div重叠（导致红色div变为紫色）。它之所以看起来有效，是因为红色的div被绘制在蓝色的上方。它们仍然重叠。不管出于什么原因，他都不想要。@sdleihssirhc：我有充分的理由不想要它，这只是一个例子来说明我的要求：）啊，我明白了。将display:inline放在蓝色div上，它就工作了。我认为蓝色必须是空的，根据红色文本的多少自动调整大小？您不需要
    表格行
    或
    表格
    CSS规则，是吗？如果只使用
    display:table cell
    ，它不工作吗？另外，如果您使用类似于
    *display:inline；zoom:1
    那么它在IE6/7中不也能工作吗？@sdleihssirhc AFAIK，您需要一个
    表
    和
    表行
    包装器才能使构造有效。我不知道后者，不过听起来很有趣 
    #container {
    border: 1px dotted black;
    width: 90%;
    display: table;
}

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