У меня есть два встроенных блока (изображение, затем содержимое), которые я хочу расположить по горизонтали следующим образом:
Хотя, когда контейнер становится меньше, блоки изображения и контента больше не остаются встроенными. Я хочу, чтобы контейнер постоянно увеличивался в высоту, чтобы обрабатывать обертку текста контента следующим образом:
Если контейнер достигнет предела, элементы будут смещаться и центрировать, но при этом стараются не создавать как можно меньше пробелов по сторонам, как это:
У меня есть HTML, который почти работает: Пример
<div style="margin:20px; height:auto; box-shadow: 2px 2px 1px #999999; border-style:solid; border-width:1px; border-color:#dddddd; padding:4px; background-color:white; " >
<div style="width:100%;" >
<div style="display:inline-block; padding-top:4px; height:100px; width:100px;">
<img src='http://placekitten.com/100/100'>
</div>
<div style="display:inline-block; vertical-align:top; padding-top:4px; min-width:70%; max-width:70%;">
<h2 style=" font-size:12px;">About</h2>
<p style="font-size:10px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
</div>
Посмотри на мою скрипку. Наверное, это то, что вам нужно:
.wrap {
border: 1px solid #ddd;
margin: 20px;
padding: 15px;
}
.wrap img {
float: left;
margin-right: 10px;
}
.wrap p {
margin: 0;
overflow: hidden;
}
@media(max-width: 500px) {
.wrap img {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
.wrap p {
text-align: center;
}
}
Просто добавьте text-align: center
к внешнему блоку. Внутренние divs наследуют это, поэтому вы также должны добавить text-align: left
to the text block.