三个 div：左边两个，右边一个。第二个有省略号。截图，附上jsfiddle

Question

这是我想要实现的模型（3 个相同模型的案例）：

所以，第一个 div(green) 的宽度是固定的。 第三个 div(blue) 总是在右侧，它会根据需要获得尽可能多的空间，考虑到其中的文本。 第二个 div(orange) 占用所有剩余空间，如果此橙色 div 中的文本不适合，则在最后获得省略号样式。

请帮助我实现这一点（IE8-IE10，Chrome 支持），我尝试将第一个元素放入容器中，尝试使用 float、inline-block，但仍然存在问题。

谢谢，这里是 jsfiddle，所以你可以快速使用它： http://jsfiddle.net/0tLvyf20/4/

<div class="container">
    <div class="checkbox"></div>
    <div class="name">Some text</div>
    <div class="value">12345</div>
</div>

Answer 1

With Flexbox

* {
    @987654322@
}
.container {
    @987654323@
    width: 300px;
    height: 30px;
    background-color: #B7B7B7;
    padding: 2.5px; /* This is the remaining gap from the edges */
}

.container div {
    margin: 5px; /* This is for the gap between elements. */
}

.checkbox {
    width: 15px;
    background-color: green;
}

.name {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: orange;
}

.value {
    background-color: LightCyan;
}

With a table（事情有点棘手）

HTML

<table class="container">
    <tr>
        <td class="checkbox"></td>
        <td class="name">
            <!-- Necessary Evil -->
            <table>
                <tr>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eaque autem quos nulla dignissimos corporis pariatur itaque excepturi debitis ratione dolorem iste consectetur accusantium necessitatibus blanditiis labore unde perferendis tempore.</td>
                </tr>
            </table>
        </td>
        <td class="value">12345</td>
    </tr>
</table>

CSS

.container {
    width: 300px;
    height: 30px;
    background-color: #B7B7B7;
    /table-layout: fixed;
    border-spacing: 5px;
}
.checkbox {
    width: 20px;
    background-color: green;
}
.name td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: orange;
}
.name table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
}
.value {
    background-color: LightCyan;
}

Answer 2

Demo

仅使用 flex-box 的 css 解决方案

css

.container {
    width: 300px;
    height: 30px;
    background-color: #B7B7B7;
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.checkbox {
    width: 15px;
    height: 15px;
    margin: 5px;
    background-color: green;
}

.name {
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: orange;
    flex: 1;
}

.value {
    height: 20px;
    background-color: LightCyan;
    margin-right: 5px;
}

Answer 3

还有一个没有表格/flexbox。

HTML 结构略有不同，css 基本相同。

<div class="container">
    <div class="checkbox"></div>
    <div class="value">12345</div>
    <div class='expander'>
       <div class="name">Some text</div>
    </div>
</div>
<div class="container">
    <div class="checkbox"></div>
    <div class="value">123456789</div>
    <div class='expander'>
       <div class="name">Some long text that won't overlap</div>
    </div>
</div>
<div class="container">
    <div class="checkbox"></div>
    <div class="value">12354354354345</div>
    <div class='expander'>
       <div class="name">Some very long text that should elipse text</div>
    </div>
</div>

使用以下 CSS

.container {
    display: block;
    width: 300px;
    height: 30px;
    background-color: #B7B7B7;
    overflow: hidden;
}

.checkbox {
    display: inline-block;
    margin-top: 5px;
    width: 15px;
    height: 15px;
    background-color: green;
    float: left;
}

.expander {
    background-color: orange;
    overflow: hidden;
    display: block;
}

.name {
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
}

.value {
    display: inline-block;
    background-color: LightCyan;
    float: right;
}

和fiddle 来查看它（仅在 chrome、IE 11 中测试过）

Answer 4

结构不同；

<div class="container">
    <div class="checkbox"></div>
    <div class="namevalue">
       Some Text
        <div class="value">1234</div>

    </div>

</div>

*{
    box-sizing:border-box;
}
.container {
    width: 300px;
    height: 30px;
    background-color: #B7B7B7;
}

.checkbox {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px;
    margin: 5px 3px 5px 5px;
    top: 3px;
    background-color: green;
    float:left;
}
.namevalue {
    display: inline-block;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: orange;
    width:275px;
top: 7px;
     float:left;

}
.name {
    display: inline-block;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: orange;
}
.value {
    display: inline-block;
    position: relative;
    background-color: LightCyan;
    float:right;
    border-left:5px solid #B7B7B7;
}