Сохраняйте отзывчивые встроенные блоки расположенными с помощью переносимых текстовых слов

Question

Сохраняйте отзывчивые встроенные блоки расположенными с помощью переносимых текстовых слов

0

У меня есть два встроенных блока (изображение, затем содержимое), которые я хочу расположить по горизонтали следующим образом:

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

Если контейнер достигнет предела, элементы будут смещаться и центрировать, но при этом стараются не создавать как можно меньше пробелов по сторонам, как это:

У меня есть 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>

Aaron 22 сен. 2013, в 22:22

Источник

Теги:

jquery

html5

css3

responsive-design

2 ответа

2

Просто добавьте text-align: center к внешнему блоку. Внутренние divs наследуют это, поэтому вы также должны добавить text-align: left to the text block.

http://jsfiddle.net/tXke7/1/

Explosion Pills 22 сен. 2013, в 18:34

0

При увеличении размера окна контейнер теряет позиционирование
Aaron 22 сен. 2013, в 20:05
0

Что ты имеешь в виду? Попробуйте также удалить минимальную ширину.
CBroe 22 сен. 2013, в 20:12

Ещё вопросы

При увеличении размера окна контейнер теряет позиционирование
Что ты имеешь в виду? Попробуйте также удалить минимальную ширину.

Charles Ingalls · Accepted Answer · 2013-09-22T17-47-00.000Z

Посмотри на мою скрипку. Наверное, это то, что вам нужно:

http://jsfiddle.net/tXke7/3/

.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;
    }
}

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