嗨,我有一个div容器,它会根据内部子div内容的大小而变化,就像它的3行文本使该容器当然自动变高了。
我在具有内容的child div标签旁边有一个child div。我想确保它像更改带有内容的div一样更改高度。
这是一个例子
任何帮助都值得赞赏
这是标记和CSS:
<div class="announcement>
<div class="color-blind-warning"><img src="icon-alert.png"/></div>
<div class="content">
<div class="titleText">Testing testing testing</div>
<div class="expand"></div>
<div class="ms-clear" style="margin-bottom: 3px;"></div>
<div class="calendar-image"> </div>
<div class="title-date">25 dec, kl: 05:30</div>
<div class="ms-clear"></div>
</div>
</div>
CSS:
.color-blind-warning{
float: left;
width: 42px;
background-color: #e6433e;
height: auto;
}
.title {
background-position: 7px 7px;
padding: 5px 15px 5px 10px;
.expand {
display: inline-block;
vertical-align: middle;
background-image: url('ner.png');
background-repeat: no-repeat;
margin-top:5px;
margin-right: -6px;
width: 16px;
height: 16px;
padding:0;
float:right;
}
.titleText {
display: inline-block;
vertical-align: middle;
width: 220px;
font-size: 12px !important;
margin-bottom: -7px;
}
.title-date {
display: inline-block;
vertical-align: middle;
font-size: 11px !important;
margin-left: 5px;
float:left;
margin-bottom:5px;
}
.calendar-image
{
height:14px;
width:14px;
background-image: url('icon-importantmessages.png') !important;
float:left;
}
最佳答案
嗨,您可以使用display
属性而不是float
->
.announcement {
display:table;
width:100%;
}
.color-blind-warning {
display:table-cell;
height:100%;
width:30%;
}
.content {
display:table-cell;
width:70%;
}
查看此演示http://jsfiddle.net/93uUg/16/