嗨,我有一个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">&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;
            }

最佳答案

嗨,您可以使用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/

10-07 18:56
查看更多