Высота div для его содержания

У меня есть код css и html для равномерного разделения кнопок (или группы кнопок). Обоснование отлично работает, но по какой-то причине высота контейнера div .justified заметно выше его содержимого.Высота div для его содержания

Почему это происходит? Я хочу, чтобы она была той же высоты, что и кнопки. Как мне это сделать? (У меня есть jsfiddle that shows my problem эквивалентных следующий код)

/* Approach based on these two: */ 
 
/* http://stackoverflow.com/questions/6865194/ */ 
 
/* http://jsfiddle.net/thirtydot/EDp8R/ */ 
 
div.justified { 
 
    text-align: justify; 
 
    -ms-text-justify: distribute-all-lines; 
 
    text-justify: distribute-all-lines; 
 
    border: thin solid purple; 
 
} 
 
div.justified > div { 
 
    border: thin solid green; 
 
    display: inline-block; 
 
    *display: inline; 
 
    zoom: 1; 
 
} 
 
div.justified div.spacer { 
 
    width: 1px; 
 
    display: inline-block; 
 
} 
 
div.justified > span.stretch { 
 
    width: 100%; 
 
    display: inline-block; 
 
    font-size: 0; 
 
    line-height: 0; 
 
}

<br/> 
 
<br/> 
 
example 1: 
 
<div class='justified'> 
 
    <div> 
 
     <button>button1</button> 
 
    </div> 
 
    <div> 
 
     <button>button2</button> 
 
    </div> 
 
    <span class='stretch'></span> 
 
</div> 
 
example 2: 
 
<div class='justified'> 
 
    <div class='spacer'></div> 
 
    <div> 
 
     <button>button1</button> 
 
    </div> 
 
    <span class='stretch'></span> 
 
</div>

источник

2015-08-03 nacho4d

поэтому дисплей: встроенный блок, чтобы охватить 'растянуть'? это требование? проблема только в этом. Если вы используете display: block, он будет работать нормально – Kenny

@ nacho4d stretch span делает, что он содержит.? –

Очень простой с flexbox, никакой дополнительной дивы или пролетов.

div.justified { 
 
    border: thin solid purple; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: justify; 
 
    -webkit-justify-content: space-between; 
 
     -ms-flex-pack: justify; 
 
      justify-content: space-between; 
 
}

<div class='justified'> 
 
    <button>button1</button> 
 
    <button>button2</button> 
 
</div>

источник

2015-08-03 13:31:01

Это выглядит очень компактно. Он работает в Chrome и Firefox, но не в Safari. Интересно, как насчет IE10 или IE11? – nacho4d

Я не использовал префиксную версию, но Safari 7.1+ поддерживает 'flexbox', как и IE10/11- http://caniuse.com/#feat=flexbox –

Я не могу заставить это работать в Safari :(Видимо' display : -webkit-flex; 'недостаточно – nacho4d

Причина, это происходит из-за stretch элемента. Это создает новый линейный разрыв строки. Разрыв вызывает появление другой строки ниже содержимого. Если вы хотите, чтобы получить это совершенно верно, попробуйте обратиться в использовании floats и clearfix, но быстро исправить, чтобы добавить следующее:

.justified { font-size: 0; }

источник

2015-08-03 13:10:47

Это сработало. Но в моем случае 'font-size: 0' заставляет размер шрифта для внутренних кнопок тоже 0. Сейчас я работаю. Вероятно, я должен проверить float и clearfix, как вы сказали. – nacho4d

У вас есть DIV Arround вашей кнопки в то время как вы должны изменить вашу кнопку. Следующий сниппет показывает, как я это сделаю.

/* Based on: */ 
 
/* http://stackoverflow.com/questions/6865194/ */ 
 
/* http://jsfiddle.net/thirtydot/EDp8R/ */ 
 
div.justified { 
 
    text-align: justify; 
 
    -ms-text-justify: distribute-all-lines; 
 
    text-justify: distribute-all-lines; 
 
    border: thin solid purple; 
 
    
 
} 
 
div.justified > button { 
 
    border: thin solid green; 
 
    display: inline-block; 
 
    *display: inline; 
 
    zoom: 1; 
 
} 
 
div.justified div.spacer { 
 
    width: 1px; 
 
    display: inline-block; 
 
} 
 
div.justified > span.stretch { 
 
    width: 100%; 
 
    display: inline-block; 
 
    font-size: 0; 
 
    line-height: 0; 
 
}

<br/> 
 
<br/> 
 
example 1: 
 
<div class='justified'> 
 
     <button>button1</button> 
 
     <button>button2</button> 
 
    <span class='stretch'></span> 
 
</div> 
 
example 2: 
 
<div class='justified'> 
 
    <div class='spacer'></div> 
 
     <button>button1</button> 
 
    <span class='stretch'></span> 
 
</div>

источник

2015-08-03 13:10:51 Silve2611

добавить CSS -

div.justified { 
    text-align: justify; 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 
    border: thin solid purple; 
    line-height: 0; /* This line */ 
}

http://jsfiddle.net/usqp2qxf/1/

источник

2015-08-03 13:15:44

Высота div для его содержания

ответ

Смежные вопросы