1

4 つの div を隣り合わせに配置しようとしています。最初の 2 つは左側に配置し、4 つ目は右側に配置し、3 つ目は両側の間に残っている幅を取る必要があります。したがって、div #1、#2、および #4 には定義済みの幅がありますが、#3 は動的です。また、この動的な幅の div には 2 つのテキスト行 (2 つのスパン) があり、ページのサイズ変更によってテキストを完全に読み取ることができない場合に、省略記号をサポートするようにしたいと考えています。現在、特定の時点で、(スパンのテキスト幅のために) 十分なスペースがない場合、div #4 が下に移動します。これは実現できますか?もしそうなら、Javascriptなしで? IE9 の最低限のサポートを探しています。

これが私が思いついたものです： http://jsfiddle.net/NMrks/aySyu/1/

HTML

<div class="container">
    <div class="blockA">A</div>
    <div class="blockB">B</div>
    <div class="blockC">
        <div class="blockC_container">
            <span class="lineA">Text text text from line A</span>
            <span class="lineB">Text text text text text from line B</span>
        </div>
    </div>
    <div class="blockD">
            <span>D</span>
    </div>
    <div style="clear:both"></div>
</div>

CSS

.container {
height: 60px;
padding-top: 5px;
padding-bottom: 5px;
min-width: 340px;
}

.container .blockA {
width: 54px;
height: 100%;
float: left;
display: block;
background-color: #ff00ff;
}

.container .blockB {
width: 50px;
height: 100%;
float: left;
display: block;
background: #df8505;
}

.container .blockC {
height: 100%;
float: left;
display: block;
background: #ff7d7b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.container .blockC .lineA {
line-height: 2.0em;
display: block;
font-weight: bold;
}

.container .blockC .lineB {
line-height: 1.0em;
display: block;
}

.container .blockD {
width: 64px;
height: 100%;
float: right;
display: block;
background: #df8505;
}

100% 幅で遊んでみたり、周囲の div の幅やフレックスボックスなどに合わせてマージンを設定したりしましたが、この問題を解決する方法がわかりませんでした。

前もって感謝します

4

2 に答える 2

2

両方の問題に対処する次のようなものはどうでしょうか。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.container {
    height: 60px;
    padding-top: 5px;
    padding-bottom: 5px;
    min-width: 340px;
}

.container .blockA {
    width: 54px;
    height: 100%;
    float: left;
    display: block;
    background-color: #ff00ff;
}

.container .blockB {
    width: 50px;
    height: 100%;
    float: left;
    display: block;
    background: #df8505;
}

.container .blockC {
    height: 100%;
    display: block;
    background: #ff7d7b;
}

.container .blockC_container p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lineA, .lineB {margin: 0;}

.container .blockC .lineA {
    line-height: 2.0em;
    font-weight: bold;
}

.container .blockC .lineB {
    line-height: 1.0em;
}

.container .blockD {
    width: 64px;
    height: 100%;
    float: right;
    display: block;
    background: #df8505;
}

</style>
</head>
<body>

<div class="container">
    <div class="blockA">A</div>
    <div class="blockB">B</div>

    <div class="blockD">
            <span>D</span>
    </div>

    <div class="blockC">
        <div class="blockC_container">
            <p class="lineA">Text text text from line A</p>
            <p class="lineB">Text text text text text from line B Text text text text text from line BText text text text text from line BText text text text text from line B</p>
        </div>
    </div>

    <div stye="clear:both"></div>
</div>

</body>
</html>

3 番目の列がすべてのスペースを占めるようにする方法は他にもありますが、HTML で他の列の後に配置し、フロートを削除するのが最も簡単です。

于 2013-08-05T01:36:37.057 に答える