个人中心
gpt4 book ai didi

html - 我可以创建嵌套的 float 列吗？还有其他方法可以达到同样的效果吗？

转载 作者：太空宇宙 更新时间：2023-11-04 04:07:33 24 4
gpt4 key购买 nike

有没有办法用 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 & both display: in-line block 并消除了它们的 float ，然后将它们包裹在一个更大的 block 中。好的，这几乎可以工作。除了如果 C 的任何一行太长而无法容纳在 screen_width - A - B 中，它会显示在 B 下方，而不是文本换行以适应可用空间。我可以通过在其上设置固定宽度来使其换行，但这需要我对用户的屏幕分辨率做出我不想做出的假设。

关于如何做到这一点有什么想法吗？我在想我真正想要的是一种说“将 D 浮在 B 和 C 以下但不用担心 A”的方式。但是没有“break clear=B+C”，只有clear=left, right, or all。

我可以很容易地用表格做到这一点，但我试图避免在 HTML 中包含表格标签。我想要一个“纯 CSS”解决方案。

更新

这是我第一次尝试的简化版本，精简后仅显示相关要点。 (我已经删除了所有的字体和边距以及其他所有不必要的东西来证明它在哪里中断。我在这些部分周围放置了边框，这样你就可以看到它们落在哪里。我将 CSS 放在脚本标签中在 HTML 文件而不是单独的 CSS 文件中。而且我卡在了 X block 而不是图像中。)

<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 的宽度缩小。

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

最佳答案

所以你只需要考虑更大的盒子方法。所以 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/

关于html - 我可以创建嵌套的 float 列吗？还有其他方法可以达到同样的效果吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21147221/

24 4 0
文章推荐： html - CSS 规则特异性
文章推荐： python - 如何只提取数组名称和括号内的内容，并使它们成为键值对？
文章推荐： python - 将 Python 字典转换为未嵌套的 JSON 对象
文章推荐： class - 更改媒体时如何用另一个 CSS 类替换 CSS 类
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com