css - 如何创建 DIV "rows"而旁边有一个 DIV float ？

Question

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

我将如何做到这一点并确保每个“行”div 实际上是一行，但仍然尊重左侧较大的 DIV(前几个不应在其下方弹出)。

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

http://jsfiddle.net/Dracorat/Xf9Qv/1/

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>

如您所见， float 完全是假的，带有小 div。

Answer 1

不要 float .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/