1

コンテンツの左側に浮かぶ 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 に答える