html - 没有换行的 CSS 水平元素？

Question

我无法在 CSS 中构建以下内容。

问题是我没有将绿色框调整到黄色容器的全尺寸，如图所示。此外，如果标签太长，则不应破坏结构。

我试过:

<div id="c1">
    <div id="c2">test</div>
    <div id="c3">test</div>        
</div>

我的CSS:

#c1 {
    background-color: yellow;
    width: 400px;
    height: 50px;
}

#c2 {
   width: 30px;
   height: 30px;
   margin: 10px;
   background-color: blue;
   display: inline-block; 
}

#c3 {
   background-color: green;
   display: inline-block;  
   height: 30px;
}

这是我制作的 JsFiddle:http://jsfiddle.net/confile/32RGz/

Answer 1

您有几个选择 - 您必须为 c2 和 c3 指定特定宽度，或者使用 CSS 表格模型。

Example Fiddle

HTML

 <div class='table'>
    <div class='row'>
        <div class='cell'>Something quite long</div>  
        <div class='cell'>
            here is some moreSomething quite long that should exceed the table cell.Something quite long that should exceed the table cell.
        </div>          
    </div>
</div>

CSS

.table{
    margin:0;
    padding:0;
    display:table;
    table-layout: fixed;
    width:100%;
    max-width:100%;
}
.row{
    display:table-row;
}
.cell{
    display:table-cell;
    border:6px solid yellow;
}
.cell:first-child{
    width:30px;
    background:blue;
    overflow:hidden;
}
.cell:last-child{
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    background:green;    
}