1

我正在尝试制作一个浮动到我的内容左侧的大型 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>

如您所见，浮动完全是虚假的，带有小 div。

4

1 回答 1

1

不要浮动.DialogLineand.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/

于 2013-04-24T22:07:00.523 回答