высота: авто не работает для положения: относительно bootstrap 3 - PullRequest
Новая
       5

высота: авто не работает для положения: относительно bootstrap 3

0 голосов
/ 26 февраля 2020

У меня есть относительный родитель и абсолютный ребенок, который находится над отцом, но отец не может получить height:auto или Рост столько же, сколько его содержимое. Если у меня есть высота, то все в порядке, но я хочу использовать min-height или auto высота для отзывчивого сайта. В чем проблема? Даже я использую clearfix, но это не работает, и нижние элементы (дочерний элемент на доступном элементе) размещаются на этих элементах, потому что высота не работает автоматически. 

.text-section.first {
  position: relative;
}

.text-container {
  top: -100px;
  padding: 0 2%;
  position: absolute;
  width: 70%;
  background-color: #fff;
  margin: 0 15%;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="text-section first clearfix">
  <div class="text-container">
    <!--min-height nemigire-->
    <h1 class="heading">Welcome to Enfold Hotel – the most beautiful hotel in South America</h1>
    <div class="row">
      <div class="text-wrapper col-md-6 col-sm-12">
        <h3 class="heading">A 5-Star superior hotel</h3>
        <p class="silver-text">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
        <p class="silver-text">Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo.
        </p>
        <span class="glyphicon glyphicon-star golden"></span>
        <span class="glyphicon glyphicon-star golden"></span>
        <span class="glyphicon glyphicon-star golden"></span>
        <span class="glyphicon glyphicon-star golden"></span>
        <span class="glyphicon glyphicon-star golden"></span>
      </div>
      <div class="text-wrapper col-md-6 col-sm-12">
        <h3 class="heading">Luxury at its best</h3>
        <p class="silver-text">Aenean massa. Cum sociis natoque penatibus et <span class="golden">magnis</span> dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
        </p>
        <p class="silver-text"> Donec pede justo, fringilla vel, aliquet nec, <span class="golden">vulputate</span> eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
      </div>
    </div>
  </div>
</div>
<div class="available"></div>

Ответы [ 2 ]

0 голосов
/ 27 февраля 2020

здесь вы go, это один из способов сделать это, не заходя в логику позиционирования c. 

.random-div{
  height:50px;
  background:red;
}
.the-div-you-want{
  background:blue;
  max-width:600px;
  text-align:center;
  margin:0 auto;
  /*overide the top margin*/
  margin-top:-20px;
  /*overide the top margin*/
  
  
}
<div class="random-div">lorem ipsum dummy data or whatever this div holds</div>
  <div class="the-div-you-want">dummy text and whatever best hotel</div>
0 голосов
/ 26 февраля 2020

когда вы устанавливаете дочерний объект с абсолютным позиционированием для его родителя, это похоже на то, что вы заставили дочерний объект визуализироваться на слое поверх его родителя (а не внутри его родителя), так что родитель не получит никакой высоты на основе своего дочернего элемента.

...