Question

我有一个布局问题，内部div“数据”似乎从其包含的div弹出并显示在外面。我在底部图片周围放置了彩色边框，而我遇到的问题是黄色文字应该在白色框中，但事实并非如此。任何人都知道这里的问题我现在很难过。我尝试过使用clear：两者但它似乎没有用。

enter image description here

.whiteContainer
        {
        border: 1px dotted red;
            margin:3%;
            background: white;
            border-radius: 15px;
        }
#display
        {
        border: 1px dotted green;
            margin:3%;
        }
.header
        {
        border: 1px dotted blue;
            float:left;
        }
.data
        {
        border: 1px dotted yellow;
            float:right;
        }

HTML部分：

<div class="whiteContainer">
    <div id="display">
        <div class='header'>Program Name: </div>
        <br />
        <div class='data'>
            Strategic Project Grants
        </div>
    </div>
</div>

编辑：

删除<br/>会给我http://jsfiddle.net/SgEMc/的结果，它仍会将绿色和蓝色元素的内容从绿色元素中弹出，这不是我想要的。我无法为白色元素指定精确的高度，因为空白区域中显示的程序名称的数量会有所不同。我稍后还需要break语句，因为我需要显示Header的位置，然后是<br/>然后居中的文本。所有这些都需要在白色容器内。

Answer 1

br是错误排列的原因，但您需要清除浮动。在白色容器上放一个clearfix样式

http://www.webtoolkit.info/css-clearfix.html

如果你不介意额外的标记，请在你的浮动元素之后添加一个清除元素。

<br style="clear:both" />

在您的数据div之后。

然后如果任何一个包装，容器将拉伸以适应内容。

Answer 2

将数据的父容器（id = display）设置为“overflow：hidden”或“overflow：auto”。它将迫使父母符合花车的形状。实际上有很多技术可以实现您的目标。请参阅CSS Tricks - All About Floats，有关于清除浮动的部分。

Answer 3

删除代码中的<br />标记。

您可能还想略微更改CSS。这就是我在以下jsFiddle中使用的内容：

.whiteContainer {
    border: 1px dotted red;
    margin:3%;
    background: white;
    border-radius: 15px;
    height:50px;
    }
#display {
    overflow:auto;
    border: 1px dotted green;
    margin:4px;
    }
.header {
    border: 1px dotted blue;
    float:left;
    }
.data {
    border: 1px dotted yellow;
    float:right;
    }

<强> jsFiddle example

Answer 4

删除<br>

http://jsfiddle.net/SgEMc/

Answer 5

删除浮动元素之间的“br”并添加溢出：隐藏;到#display。

看到这个： http://jsfiddle.net/HOLYCOWBATMAN/updZW/

内部div弹出布局

编辑：

5 个答案: