我在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/
答案 0 :(得分:2)
您有几个选择 - 您必须提供c2和c3特定宽度,或使用CSS表模型。
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;
}
答案 1 :(得分:0)
上下文不清楚,但尝试将宽度添加到#c3。宽度:例如80%
答案 2 :(得分:0)
这是你的工作吗?
我添加了额外的边距并添加了宽度百分比:
#c3 {
display:inline-block;
background-color: green;
height: 30px;
width:85%;
float:left;
margin-top: 10px;
margin-bottom: 10px;
}
答案 3 :(得分:0)
http://jsfiddle.net/myajouri/32RGz/9/
#c1 {
width: 400px;
display: table;
box-sizing: border-box;
border-collapse: collapse;
}
#c2, #c3 {
display: table-cell;
height: 30px;
border: 20px solid yellow;
}
#c2 {
width: 30px;
background-color: blue;
}
#c3 {
background-color: green;
}