Question

您好我想知道您是否可以快速帮助我。

目前在我的文件中发生这种情况：

http://i.stack.imgur.com/tCkDk.png

但是，我想要发生这种情况：

http://i.stack.imgur.com/CBCWZ.png

我试图让红色div的高度与其父级一样，但我无法弄清楚如何做到这一点。有什么想法吗？

Answer 1

在两个div上使用float: left和float: right： - ）

Answer 2

float:left您成像，然后使用一些左边距为您的文字。

您可以看到演示there

Answer 3

没有花车的方法是使用display: inline-block。以下内容也适用于IE7 +！（将此样式应用于两个元素）：

selector
{
    display: inline-block;  // For real browsers
    zoom: 1;                // For useless, maddeningly crap browsers
    *display: inline;       // For useless, maddeningly crap browsers
}

Here is a link我对此的看法。唯一的小问题是您必须在文本元素上指定宽度。它比浮动更好 - 它保持元素流入，这意味着布局更容易。

Answer 4

玩Div的底部边距（边距底部）怎么样？

Answer 5

有几种方法，取决于你如何绘制框。你可以使用几个像素的填充，或者有一个容器div，向左浮动，高度为100％，并且在盒子的div / image中，向左浮动。，或者如上所述，将左边的div浮动到左边，右边的文本浮动到右边。

Answer 6

原谅长期样本：

<html>
<head>
<title>Div Test</title>
</head>
<style type="text/css">

#wrap {
    width: 200px;
}

#redbox {
    height: 45px;
    width: 45px;
    background-color: Red;
    border: 5px solid black;
    margin-right: 10px;
    display: inline-block;
    float: left;
}

#textbox {
    font-weight: bold;
    font-size: 20px;
    display: inline-block;
}

</style>
<body>
    <div id="wrap">
        <div id="redbox"></div>
        <div id="textbox">
            Lorem ipsum dolor sit amet,
            consectetur adipisicing elit.
        </div>
    </div>
</body>
</html>

如何使div扩展到容器允许的范围？

6 个答案: