Как я могу убедиться, что тег div автоматически определяет высоту контейнера?

Question

Как я могу убедиться, что тег div автоматически определяет высоту контейнера?

0

Привет, у меня есть контейнер 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;
            }

Obsivus 08 нояб. 2013, в 15:47

Источник

0

stackoverflow.com/questions/18496788/...
Milche Patern 08 нояб. 2013, в 14:48
0

Я не использую структуру таблицы с тегами div
Obsivus 08 нояб. 2013, в 15:01
0

Какой div увеличивается, а какой вы хотите изменить?
Zach Saucier 08 нояб. 2013, в 15:02
0

@Zeaklous Я хочу изменить размер div для дальтоников до размера высоты контейнеров при получении содержимого. тег div контейнера является объявлением
Obsivus 08 нояб. 2013, в 15:05
0

Вы пытались дать .color-blind-warning height:100% ?
Zach Saucier 08 нояб. 2013, в 15:06
0

да, но это не приведет к изменению размера до высоты контейнеров, потому что у .color-blind-warning есть изображение с высотой 60 пикселей
Obsivus 08 нояб. 2013, в 15:26

Показать ещё 4 комментария

Теги:

html

css

1 ответ

Ещё вопросы

Я не использую структуру таблицы с тегами div
Какой div увеличивается, а какой вы хотите изменить?
@Zeaklous Я хочу изменить размер div для дальтоников до размера высоты контейнеров при получении содержимого. тег div контейнера является объявлением
Вы пытались дать .color-blind-warning height:100% ?
да, но это не приведет к изменению размера до высоты контейнеров, потому что у .color-blind-warning есть изображение с высотой 60 пикселей

DaniP · Answer 1 · 2013-11-08T13-14-00.000Z

Привет, вы можете работать с свойством 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/