Question

我试图将4个div放在一起，其中前两个必须放在左侧，第四个应该放在右边，第三个必须保持两者之间的宽度两侧。因此，div＃1，＃2和＃4具有预定义的宽度，但＃3是动态的。此外，这个动态宽度div有两个文本行（两个跨度），我希望它们支持省略号，当页面调整大小时，无法完全读取其文本。现在，在给定点，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％宽度播放，根据其他周围的divs宽度，flexbox等设置边距，但我无法找到解决此问题的方法。

提前致谢

Answer 1

这样的事情如何解决这两个问题：

<!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>

还有其他方法可以让第三列占用所有空间，但将其放在HTML中的另一列之后并删除它的浮动是最简单的。

Answer 2

小修正 blockA，blockC，blockD应该有width：auto，否则它们的内容将溢出到外面。

使用长AAA，BBB和CCC细胞更新样本：

<!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: auto;
    height: 100%;
    float: left;
    display: block;
    background-color: #ff00ff;
}

.container .blockB {
    width: auto;
    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: auto;
    height: 100%;
    float: right;
    display: block;
    background: #df8505;
}

</style>
</head>
<body>

<div class="container">
    <div class="blockA">AAAAAAAAAAAAAAAAA</div>
    <div class="blockB">BBBBBBBBBBBBBBBBBB</div>

    <div class="blockD">
            <span>DDDDDDDDDDDD</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>

http://jsfiddle.net/v5Dns/3/

动态宽度div和省略号文本

2 个答案: