当前位置：文江博客话题详情

液体宽度 div 内的右浮动 div。我该如何让它发挥作用？

发布于 2024-09-03 02:55:48 字数 381 浏览 3 评论 0原文

我有一个 div，该 div 中有一个

标记中的名称（它在布局上的语义是正确的）和一个带有一些描述该

的值的 div代码>值。我希望嵌套的 div 位于右侧，而使其工作的唯一方法是使用固定宽度的容器和 `float: right;`。正如您所猜测的，当

的值导致嵌套 div 移动到下方而不是向右时，对象就会中断。我尝试过 `min-width`，但它最终拉伸到包含容器 div 的 div 的最大尺寸。我希望它是这样的，当 h4 太大时，整个 div 都会拉伸。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

水染的天色ゝ 2024-09-10 02:55:48

如果您希望嵌套的

在

太大时向下移动，请将 `clear: right` 应用于嵌套的
。

回复收藏 0 原文

仅冇旳回忆 2024-09-10 02:55:48

尝试将 h4 设置为 display:block 并向左浮动。

回复收藏 0 原文

萌酱 2024-09-10 02:55:48

根据您希望距父级右上角的边距，为父级 div position:relative 和子级 div position:absolute 指定一个较小的顶部和右侧值分区为了使扩展宽度表现正确，您应该能够在父 div 上设置与子 div 的宽度相等的右填充，以便 h4 在子 div 太长时不会与子 div 重叠，但会扩展父 div正确地div。

div { padding-right:200px; position: relative; }
div div { position: absolute; top:0; right: 0; width:200px; }

Give the parent div position: relative and the child div position:absolute with a small top and right value based on the margin you desire from the top-right corner of the parent div. In order to get the expanding width behaving correctly, you should be able to set right padding on the parent div equivalent to the width of the child div so that the h4 doesn't overlap the child when it is too long, yet expands the parent div properly.

div { padding-right:200px; position: relative; }
div div { position: absolute; top:0; right: 0; width:200px; }

回复收藏 0 原文

·深蓝 2024-09-10 02:55:48

这项工作就像一个魅力：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pt" dir="ltr">

  <head>
    <title>Organize the Content of a DIV</title>

        <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

        <style type="text/css">
            div {width:80%;}
            div h4 {float:left;max-width:40%;}
            div div {float:right;max-width:40%;}
        </style>

    </head>

    <body>

        <div>
            <h4>This is working?</h4>
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>

    </body>
</html>

让我们看看 CSS：

{width:80%;} 容器的动态宽度
h4 {float:left;max-width:40%;} 设置左边的
屏幕，并且不允许它增长
超过容器宽度的 40%
div {float:right;max-width:40%;} 设置嵌套在
屏幕右侧，并且不允许
增长超过 40%
容器的宽度

这是防止两个嵌套元素被破坏的简单方法......
max-width 的 40% 只是一个例子，可以是 60~40 :)

希望对你有帮助！

This work's like a charme:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pt" dir="ltr">

  <head>
    <title>Organize the Content of a DIV</title>

        <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

        <style type="text/css">
            div {width:80%;}
            div h4 {float:left;max-width:40%;}
            div div {float:right;max-width:40%;}
        </style>

    </head>

    <body>

        <div>
            <h4>This is working?</h4>
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>

    </body>
</html>

Let's look at the CSS:

{width:80%;} Dynamic width for the container
h4 {float:left;max-width:40%;} Set's the at the left of the
screen, and doesn't allow it to grow
more that 40% of the container's width
div {float:right;max-width:40%;} Set's the nested to be on the
right of the screen,and doesn't allow
it to grow more that 40% of the
container's width

This is a simple way to prevent the two nested element's from breaking...
The 40% of max-width is just an example, could be 60~40 :)

Hope that helps U!

回复收藏 0 原文

~没有更多了~