Question

我正在尝试制作一个浮动到我内容左侧的大型DIV，然后使用内容旁边的其他DIV。

我该如何做，并确保每个“行”div实际上是一行，但仍然尊重左边较大的DIV（前几个不应该在它下面弹出）。

我在这里复制了jsFiddle上的问题：

CSS：

.DropCapImage {
    border: 2px solid purple;
    color: #EEE;
    display: block;
    width: 200px;
    height: 300px;
    float: left;
    margin: 0 10px 10px 0;
}

.DialogAction {
    padding: 10px;
    font-style: italic;
    float: left;
    clear: right;
}

.DialogLine {
    float: left;
    clear: right
}

.DialogWho {
    font-weight: bold;
    float: left;
    width: 100px;
}

.DialogWhat {
    float: left;
    white-space: pre-wrap;
    font-family: 'consolas', monospace;
}

HTML：

<div class="DropCapImage">Pretty Image Here</div>

<div class="DialogLine">
    <div class="DialogWho">KING CLAUDIUS</div>
    <div class="DialogWhat">Short Text</div>
</div>

    <div class="DialogAction">Exeunt all but HAMLET</div>

    <div class="DialogAction">Something Else</div>

    <div class="DialogAction">Another Else</div>

    <div class="DialogLine">
        <div class="DialogWho">HAMLET</div>
        <div class="DialogWhat">O, that this too too solid flesh would melt
Thaw and resolve itself into a dew!
Or that the Everlasting had not fix'd
His canon 'gainst self-slaughter! O God! God!
How weary, stale, flat and unprofitable,
Seem to me all the uses of this world!
Fie on't! ah fie! 'tis an unweeded garden,
That grows to seed; things rank and gross in nature
Possess it merely. That it should come to this!
But two months dead: nay, not so much, not two:
So excellent a king; that was, to this,
Hyperion to a satyr; so loving to my mother
That he might not beteem the winds of heaven
Visit her face too roughly. Heaven and earth!
Must I remember? why, she would hang on him,
        ... etc</div>
</div>

    <div class="DialogLine">
        <div class="DialogWho">Speaker Below</div>
        <div class="DialogWhat">This should be below the purple area
    </div>

正如你所看到的，浮动完全是假的，有小div。

Answer 1

不要浮动.DialogLine和.DialogAction元素

只需给他们正确的margin-left（等于左栏的宽度）

并且不要忘记给他们overflow:hidden，以便扩展以适应他们的内容..

.DialogAction {
    padding: 50px;
    font-style: italic;
    margin-left:210px;
}
.DialogLine {
    margin-left:210px;
    overflow:hidden;
}

http://jsfiddle.net/gaby/Xf9Qv/4/

演示

如何在DIV浮动旁边创建DIV“行”？

1 个答案: