Блог

Главная - Вопросы по программированию - как сделать div фиксированной высоты внутри div

как сделать div фиксированной высоты внутри div

#html #css

#HTML #css

Вопрос:

 <style type="text/css">
#displayHeader {
img {
 width: 100%;
 max-width: 100%;
max-height: 100%;
}
 .header-img-inner {
 max-height:100%;
}
}
</style>


<div id="displayHeader" style="height: 83.03px;">
<div class="header-inner">
<div class="row">
<div id="headerCol0" class="col-xs-4 text-center header-img-wrapper">
<div class="header-img-inner">
<img src="test.svg">
<p>TEST</p>
</div>
</div>
<div id="headerCol1" class="col-xs-4 text-center header-img-wrapper">
<div class="header-img-inner">
 <img src="test.svg">
 </div>
        </div>
        <div id="headerCol2" class="col-xs-4 text-center header-img-wrapper">
            <div class="header-img-inner">
                <img src="test.svg">
                <p>tt</p>
            </div>
        </div>

                                        </div>

                            </div>
                        </div>
                            <div id="displayContent" style="height: 264.8px;">
                                <div class="inner">          
</div>
<div>
</div>
<div>
</div>
 <div>

Изображение и текст выходят из блока div, почему это происходит?

Не используется плавающий левый, правый. Он не работает с position:relative для родительского элемента и position absolute для дочернего элемента, но все равно работает плохо.

Я устанавливаю максимальную высоту для изображения только при установке в заголовке-img-inner

Комментарии:

1. вы пробовали overflow:hidden ?

2. Не могли бы вы, пожалуйста, предоставить графику того, чего вы пытаетесь достичь? По вашему сообщению трудно сказать. Вы пытаетесь наложить текст на изображение? Кроме того, ваш CSS не является CSS, если он не МЕНЬШЕ / SASS.

Ответ №1:

Почему бы не использовать position: inherit; чтобы изображение и все, что вы хотите внутри div, наследовали позицию. Это может помочь, попробуйте.

Ответ №2:

Вы хотите что-то подобное?

 .block {
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block:before {
  content: '200B';
/*   content: '';
  margin-left: -0.25em; */
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
 }

.centered {
  display:inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
 }
  
 <div class="block" style="height: 300px;">

    <div class="centered">
      <h1>Some Text</h1>
        <img src="Untitled-2.jpg" height="150px">
    </div>
 </div>

Пожалуйста, проверьте эту ссылку:-https://css-tricks.com/centering-in-the-unknown/