2017-01-18 2 views
0

Я знаю, что этот вопрос задан миллион раз, но после просмотра тонны сообщений я не могу найти ответ.Родитель DIV не расширяется, чтобы соответствовать всему содержанию

Вот мой код:

.feedCard { 
 
    display: block; 
 
    margin-left: 227px; 
 
    margin-top: 17px; 
 
    width: 78%; 
 
    height: 100%; 
 
    min-height: 115px; 
 
} 
 
.facebookPost { 
 
    display: block; 
 
    width: 100%; 
 
    height: 25px; 
 
    background-color: #3b5998; 
 
    text-align: left; 
 
    padding-top: 5px; 
 
} 
 
.postContent { 
 
    display: block; 
 
    height: 100%; 
 
} 
 
.postLabel { 
 
    color: #FFF; 
 
    margin-left: 8px; 
 
} 
 
.postLabel a { 
 
    color: #FFF; 
 
    text-decoration: none; 
 
} 
 
.postStamp { 
 
    color: #FFF; 
 
    margin-right: 8px; 
 
    float: right; 
 
} 
 
.postTextHolder { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin-top: 11px; 
 
} 
 
.postText { 
 
    margin-top: 10px; 
 
    margin-left: 5px; 
 
} 
 
.feedPostUserIcon { 
 
    width: 75px; 
 
    height: 75px; 
 
    float: left; 
 
    margin-left: 5px; 
 
    margin-top: 0px; 
 
}
<div class="feedCard"> 
 
    <div class="facebookPost"> 
 
    <span title="view on facebook" class="postLabel"><a href="facebook.com">facebook</a></span> 
 
    <span class="postStamp">Posted at 11:42 AM on 1/18/17</span> 
 

 
    <div class="postContent"> 
 
     <div class="postTextHolder"> 
 
     <img class="feedPostUserIcon" src="images/image.png"> 
 
     <span class="postText">filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Главный ДИВ сидит это минимальная высота установки и не расширяется, чтобы соответствовать дополнительный текст.

Боковой вопрос: есть ли способ сделать обернутый текст более приятным? Кажется, он действительно близок к изображению, и это выглядит ужасно. Любые предложения приветствуются.

+1

Пожалуйста квалифицироваться, что вы имеете в виду основной 'div'. Это '.feedCard'? '.facebookPost'? –

+0

для вашего бокового вопроса, вы должны иметь возможность добавить «margin-right» в '' или 'margin-left' в диапазон (я думаю, не тестировался) – Jhecht

+0

Вы его получили. Я рад, что StackOverflow существует, поэтому я могу уложить свой мозг на два часа, а затем задать вопрос, а затем сразу ответить на мой собственный вопрос, а потом ответить на мой вопрос на что-то супер простое. TL, DR Я немой, спасибо – Treedot

ответ

0

Иногда я ненавижу себя.

У меня было «сообщение содержания» DIV внутри «facebook post» DIV, когда оно должно было быть ниже него.

Вот фиксированный код для справки:

  <div class="feedCard"> 
       <div class="facebookPost"> 
        <span title="view on facebook" class="postLabel"><a href="facebook.com">facebook</a></span> 
        <span class="postStamp">Posted at 11:42 AM on 1/18/17</span> 
       </div> 
       <div class="postContent"> 
        <div class="postTextHolder"> 
         <img class="feedPostUserIcon" src="images/image.png"> 
         <span class="postText"> ... </span> 
        </div> 
       </div> 
      </div>