Question

给定一个块元素和位于其右侧的浮点数，当空间受限时，如何确保块元素不会与浮点重叠？以下是一个示例（jsfiddle）：

HTML：

<body>
<div class='goodContainer'>
    <div class='floater'>Image Placeholder</div>
    <p class='header'>Header is here</p>
</div>
<br/>
<div class='badContainer'>
    <div class='floater'>Image Here</div>
    <p class='header'>Header is here</p>
</div>
</body>

CSS：

.goodContainer {
    width: 400px;
    border: 1px solid green;
}
.badContainer {
    width: 300px;
    border: 1px solid red;
}
.header {
    border: 1px solid black;
    max-width: 70%;
}

.floater {
    float: right;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}

在第一个框（绿色边框）中，有足够的空间让标题和图像和平共存。在第二个（红色框）空间开始受约束，它们开始重叠。在这种情况下，有没有什么方法可以使标题动态调整为不重叠图像？我愿意改变所需的一切，使其保持整体外观（特别是在可用时保留标头的正确宽度）。

Answer 1

也许这一个：

.header {
    display: block;
    margin: 5px 0px;
    border: 1px solid black;
    margin-right: 100px;
    max-width: 250px;
}

http://jsfiddle.net/5bpgrcq9/6/

浮动重叠时动态调整块元素的大小

1 个答案: