Question

有没有办法用CSS做到这一点？

我想要一个如下所示的页面布局：

+-----+-----------+---------------+
|     |     B     |       C       |
|  A  |           |               |
|     +-----------+---------------+
|     |                           |
+-----+                           |
      |           D               |
      |                           |

A是侧边栏菜单。 B是一张照片。 C是页面的标题，发布日期，也许是其他一些标题类型的信息。 D是本文的主要内容。

我可以在A上设置固定宽度，但不能在任何其他列上设置。

所以我做了A {宽度：200px; float：left;}，D是{margin-left：200px; float：left;}和B＆amp; C都是浮动的：左边。然后在HTML中，在B＆amp; C我放心了=全部。

这几乎奏效了。但问题是它迫使D成为，而不仅仅是低于B＆amp; C，但也低于A.也就是说，它给出了B＆amp;底部之间的间隙。 C和D的顶部。

如果我删除clear = all，那么如果B＆amp; C不是完全相同的高度，D中的文本直接从较短者开始。

所以计划＃2：我做了B＆amp;两个显示：内嵌块并从中消除浮动，然后将它们包裹在一个更大的块中。好的，这几乎可行。除非如果任何C行太长而无法放入screen_width - A - B，它将显示在B下方而不是文本环绕以适合可用空间。我可以通过在其上放置固定宽度来进行换行，但这需要我对用户的屏幕分辨率做出我不想做的假设。

有关如何做到这一点的任何想法？我在想，我真正想要的是一种方式来说“浮动D低于B＆amp; C但不要担心A”。但是没有“突然清楚= B + C”，它只是清楚=左，右或全部。

我可以轻松地使用表格，但我试图避免在HTML中包含表格标签。我想要一个“纯CSS”解决方案。

更新

这是我的第一次尝试的简化版本，剥离以显示相关点。（我已经删除了所有的字体和边距以及其他所有不必要的东西来证明它在哪里。我已经在各个部分放置了边框，这样你就可以看到它们落在哪里。我把CSS放在了脚本标签中在HTML文件中而不是单独的CSS文件。我已经陷入了X块而不是图像。）

<html><title>3-Col Test</title>
<style type="text/css">
.sidebar, .head1, .head2, .body {border: 1px solid black;}
.sidebar {float:left; width: 200px;}
.head1 {float: left;}
.head2 {float: left;}
.body {margin-left: 202px; clear: both;}
</style>

<div class="sidebar">
  <p>Menu</p>
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
</div>

<div class="head1">
  <p>XXXX<br/>
  XXXX<br/>
  XXXX<br/>
  XXXX</p>
</div>

<div class="head2">
  <h1>This is the title</h1>
  <h2>This is the subtitle</h2>
</div>

<div class="body">
<p>To be, or not to be, that is the question. Whether tis nobler in the mind to suffer the
  slings and arrows of outrageous fortune, or to bear arms against a sea of troubles, and by 
  opposing, end them. To die, to sleep, no more! And by a sleep to say we end the heartache,
  and the thousand natural shocks that flesh is heir to. Tis a consummation devoutly to be
  wished. To die, to sleep, to sleep ... aye, there's the rub. For in that sleep of death
  what dreams may come when we have shuffled off this mortal coil must give us pause.
  There's the respect that makes calamity of so long life. Etc.</p>
</div>
</html>

请注意，这会导致内容区域被强制放在侧边栏下方。

好吧，保持相同的HTML，我将样式表更改为：

<style type="text/css">
.sidebar, .head1, .head2, .body {border: 1px solid black;}
.sidebar {float:left; width: 200px;}
.head1 {display: inline-block;}
.head2 {display: inline-block;}
.body {margin-left: 202px;}
</style>

这几乎可行。唯一的问题是，如果你缩小浏览器窗口，直到它不再宽到侧边栏加上head1加上head2中的最长行，而不是head2包装，它会被推到head1以下。我想要发生的是head2的宽度缩小。

哦，请注意，你必须在块中有一些文字来查看问题。你不能只是在它上面施加一个“宽度：100px”来强制它占用一些空间，因为在它上面放一个宽度的结果与占用实际空间的文本非常不同。我从数据库中提取图像和文本，不同页面的图像大小不同，当然不同页面的标题长度也不同。

Answer 1

所以你需要把盒子方法想象得更大。所以A是一个盒子而B，C，D都将在同一个盒子里。然后B和C将是一个较小的盒子等。

<div class="container">
    <div class="A">

    </div>
    <div class="mainContent">
        <div class="headerArea">
            <div class="B">

            </div>
            <div class="C">

            </div>
        </div>
        <div class="D">

        </div>

在此处查看http://jsfiddle.net/Zy7Bq/

Answer 2

如果您将其添加到您的代码中：

 <script>
     var height = document.getElementById("c").offsetHeight;
     document.getElementById("b").style.height = height +"px";
 </script>

你应该能够摆脱break clear = all。

PS：将“c”和“b”替换为您的div所拥有的id。

我可以创建嵌套浮动列吗？其他一些方法达到同样的效果？

2 个答案: