Удерживать встроенный блок, пока ширина браузера не достигнет определенной ширины?

Question

Удерживать встроенный блок, пока ширина браузера не достигнет определенной ширины?

0

У меня есть два элемента inline-block, которые являются dt и <div class="details">.

Они появлялись бок о бок при просмотре с большого экрана.

Когда размер браузера изменится, <div class="details"> перейдет к следующей строке, это приведет к его встроенному элементу.

Мой вопрос в том, может ли изображение dt быть изменено в первую очередь (когда размер браузера - не доходит до края браузера)? Таким образом, мой второй элемент встроенного блока <div class="details"> выпадет.

Когда изображение достигнет определенной ширины (допустим, 200 пикселей), (или, определенной ширины браузера), затем <div class="details"> перейти к следующей строке.

Я хочу достичь этого, потому что по умолчанию <div class="details"> перейдет к следующей строке при касании dt а затем оставит этот пробел между dt и краем браузера.

Надеюсь, кто-нибудь может указать мне, как это сделать, может быть, с некоторыми JQuery. Спасибо.

HTML

<dl>
    <dt><img src="Image Source"/></dt>
    <div class="details">
        <dd>Name</dd>
        <dd>Price</dd>
    </div>
</dl>

скрипка

http://jsfiddle.net/pandaktuai/SxbHd/

pandaktuai 05 окт. 2013, в 04:25

Источник

Теги:

jquery

html

css

1 ответ

Ещё вопросы

avrahamcool · Answer 1 · 2013-10-13T06-24-00.000Z

Здесь скрипка

dd должен быть вложен непосредственно внутри элемента dl. (удалить div), даже если он работает неправильно.
ваше вертикальное выравнивание не работает. (поэтому я не реализовал его в своей скрипке)

это решение использует calc() (CSS3), поэтому, если вам нужна более старая поддержка браузера, используйте скрипт вместо этого. Кроме того, если вы можете использовать обычный макет (div вместо макета списка), это можно сделать, используя макет таблицы CSS.

HTML:

<dl>
    <dt><img src="http://i230.photobucket.com/albums/ee189/pandaktuai/img-fluid.jpg" /></dt>
    <dd>Name<br />Price</dd>
</dl>

CSS:

*
{
    padding: 0;
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body
{
    margin: 0 auto;
    max-width: 1024px;
}

dl
{
    width: 100%;
    background-color: black;
}
    dl:after
    {
        content: '';
        display: block;
        clear: both;
    }

dt, dd
{
    float: left;
}

dt
{
    max-width: calc(100% - 215px);
}

    dt img
    {
        max-width: 100%;
        width: auto;
        height: auto;
        vertical-align: middle;
    }

dd
{
    padding: 5%;
    color: white;
    min-width: 215px;
}

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