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

有没有一种方法可以用CSS实现这一点

我希望页面布局如下所示：

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

A是一个侧边栏菜单。B是一幅画。C是页面的标题，发布日期，可能是其他标题类型的信息。而D是本文的主体部分

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

所以我做了一个{width:200px；float:left；}，D是{margin left:200px；float:left；}和B&C都是float:left。然后在HTML中，在B&C之后，我放了一个break clear=all

这几乎奏效了。但问题是它迫使D不仅低于B&C，也低于A。也就是说，它在B&C的底部和D的顶部之间形成了一个间隙

如果我删除clear=all，那么如果B&C的高度不完全相同，则D中的文本直接从较短的位置开始

所以计划#2：我制作了B&tware-display:in-line块，去掉了浮点数，然后将它们包装在一个更大的块中。好吧，差不多可以了。除此之外，如果C的任何一行太长，无法容纳屏幕宽度-A-B，它将显示在B的下方，而不是文本换行以容纳可用空间。我可以通过在屏幕上放置一个固定的宽度使其环绕，但这需要我对用户的屏幕分辨率做出我不想做出的假设

你有什么想法吗？我在想，我真正想要的是一种表达“浮动D低于B&C，但不要担心a”的方式。但是没有“清除=B+C”，只有清除=左、右或全部

我可以很容易地对表执行此操作，但我正在尝试避免在HTML中包含表标记。我想要一个“纯CSS”解决方案

更新

这里是我第一次尝试的简化版本，简单介绍一下相关的要点。（我删掉了所有的字体和边距，以及其他不必要的东西来演示它在哪里被破坏。我在各个部分周围加了边框，这样你就可以看到它们落在哪里了。我将CSS粘贴在HTML文件中的一个脚本标记中，而不是单独的CSS文件中。我将CSS粘贴在一个X块中，而不是图像中。）

3列测试
.sidebar、.head1、.head2、.body{边框：1px纯黑色；}
.sidebar{float:左；宽度：200px；}
.head1{float:left；}
.head2{float:left；}
.body{左边距：202px；清除：两者；}
菜单

项目1

项目2

项目3

项目4

项目5

XXXX

XXXX

XXXX

XXXX

这是标题
这是副标题
生存还是毁灭，这是个问题。受苦受难是否更高尚
投下无耻的命运之箭，或拿起武器对抗浩瀚的麻烦之海
反对，结束他们。去死，去睡觉，再也没有了！通过睡眠来结束心痛，
以及肉体所承受的上千次自然冲击。这是一个虔诚的圆满
但愿如此。去死，去睡觉，去睡觉。。。是的，有麻烦了。因为在死亡的睡梦中
当我们摆脱这个凡人的漩涡时，什么样的梦想可能会到来，这必须让我们停下来。
有一种尊重，使这么长的生命成为灾难。等等

请注意，这将导致内容区域强制位于侧边栏下方

好吧，保持相同的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>

.sidebar、.head1、.head2、.body{边框：1px纯黑色；}
.sidebar{float:左；宽度：200px；}
.head1{显示：内联块；}
.head2{显示：内联块；}
.body{左边距：202px；}

这几乎奏效了。一个问题是，如果缩小浏览器窗口，直到其宽度不再足以容纳侧边栏加上head1再加上head2中最长的线，而不是head2环绕，它会被推到head1下方。我想要发生的是head2的宽度缩小

---

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

因此，您只需要考虑更大的box方法。所以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>

---

如果将其添加到代码中，请参见此处

：

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

var height=document.getElementById（“c”）.offsetHeight；
document.getElementById（“b”）.style.height=height+px；

您应该能够摆脱

break clear=all

---

注：将“

c

”和“

b

”替换为您的div拥有的任何

id

s。

滚动时“A”是否需要能够停留在屏幕顶部？您可以发布一个小提琴来处理您当前的代码吗？类似这样的事情吗@sbeliv01是粘附在屏幕顶部：不是要求。如果是这样的话可能会很好，但是。嗯，谢谢你的建议，但是你的例子的要点是，你明确地设置了宽度和高度，有时以百分比为单位，有时以像素为单位。但我真的不想那样做。我希望能够把一张任意大小的图片放在B中，然后让C从屏幕宽度中减去a和B后得到剩余的宽度。我不知道图片有多高，也不知道C框中的标题等要排多少行。当我在没有固定宽度和高度的情况下做类似的事情时，我会遇到我描述的问题。我讨厌使用JavaScript来“修复”我的CSS，但这可能是一个不现实的目标。这看起来是可行的。我得试试。

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