html - 如何确保 div 标签获得容器高度的自动高度？

Question

你好，我有一个 div 容器，它根据内部的子 div 内容改变大小，就像它的 3 行文本一样，容器当然会自动获得更高的高度。

我在包含内容的子 div 标签旁边有一个子 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">&nbsp;</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;
            }

Answer 1

您好，您可以使用 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/