javascript - 三个 div : two on the left, 一个在右边。第二个有省略号。屏幕截图，附上jsfiddle

Question

这是我想要实现的模型(同一模型的 3 个案例):

因此，第一个 div(green) 具有固定宽度。第三个 div(blue) 总是在右侧，考虑到其中的文本，它会根据需要获得尽可能多的空间。第二个 div(橙色)占用所有剩余空间，如果这个橙色 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

* {
    <a href="http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/" rel="noreferrer noopener nofollow">box-sizing: border-box;</a>
}
.container {
    <a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="noreferrer noopener nofollow">display: flex;</a>
    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;
}