3

我正在写一个看起来像代码一样的页面

<div class="green">  
  <span class="orange">s1</span>
  <span class="orange">s2</span>
</div>

但这应该通过 CSS 格式化，例如： 布局说明

  • 周围的黑框显示浏览器中的整个页面。（想想<body></body>）
  • 红框是固定宽度和固定高度基本上是空白空间，应该由 CSS 添加.green:before（我正在使用它的能力来格式化它的边框以获得视觉效果）
  • 绿框显示真实内容，应尽可能宽以将两者包含<span>在一行中
  • 蓝色框架应该由 CSS 创建.green:after，具有固定的高度，并且应该占据页面右边框之前的所有空间 - 即它必须具有可变宽度。

所需的浏览器是最新版本中的现代浏览器（Firefox、Chrome、Safari、Opera）。无需照顾IE。不过，移动浏览器会很棒。

我怎样才能做到这一点？（我所有的尝试迟早都会失败......）

带有此示例代码的 jsFiddle 位于http://jsfiddle.net/X2MDG/

4

1 回答 1

2

恐怕没有办法满足你所有的限制。似乎没有 CSS 解决方案的主要事情是：

  • :before在不影响红色和蓝色:after内容的宽度的情况下，无法仅控制绿色位的宽度。正如您在问题的评论中提到的那样，使用不同的 DOM 结构不是一种选择。
  • 蓝色 ( :after) 内容应占用绿色（主要）内容不需要的所有空间。
  • 红色/蓝色的固定高度可能需要清除整个 div 下方的元素。

因此，据我所知，您提出的问题并没有 100% 令人满意的答案。无论哪种方式，这是我研究这个问题的代码，也许它可以帮助你或其他人在这个问题上绊倒。请参阅此 jsfiddle或以下代码：

<div id="page">
    <div class="green">
        <span>Orange 1.</span>
        <span>Orange 2. Which can be really wide.</span>
    </div>
    <p style="clear: both;">Black is the page. Clearing is
            needed because the red and blue boxes are not in the 
            flow but do have quite some height.</p>
</div>

CSS：

div#page { 
    border: 2px solid black;
    width: 80%;
    padding: 2px;
}

div.green:before {
    content: 'red / before';
    border: 2px solid red;
    float: left;
    display: inline-block;
    width: 140px;
    height: 200px;
}

div.green {
    border: 2px solid green;
}

div.green:after {
    content: 'blue / after';
    border: 2px solid blue;
    display: inline-block;
    float: right;
    height: 60px;
}

div.green span {
    border: 2px solid orange;
}
于 2012-05-20T14:43:22.300 回答