Question

我有一个div，在div中是一个<h4>标签中的名称（它在布局上在语义上是正确的）和一个带有描述<h4>值的值的div。我希望嵌套的div位于右侧，我可以使用它的唯一方法是使用固定宽度的容器float: right;。您可以猜到，当<h4>的值导致嵌套div向下移动而不是向右移动时，对象会中断。我已经尝试了min-width，但它最终会延伸到包含容器div的div的最大大小。我希望它是这样的，当h4太大时，整个div只会延伸。

Answer 1

如果您希望嵌套<div>在<h4>过大时向下移动，请将clear: right应用于嵌套<div>。

Answer 2

尝试将h4设置为显示：阻止并向左浮动。

Answer 3

根据父div的右上角所需的边距，为父div position: relative和子div position:absolute提供一个小的顶部和右边的值。为了使扩展宽度正常运行，您应该能够在父div上设置相当于子div宽度的右边距，以便h4在子节点太长时不与子节点重叠，但扩展父节点div正确。

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

Answer 4

这项工作就像一个魅力：

<!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％以上   容器的宽度

这是防止两个嵌套元素破坏的简单方法... 最大宽度的40％只是一个例子，可能是60~40：）

希望有助于你！

在液体宽度div内右浮动div。我如何让它工作？

4 个答案: