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

Question

У меня есть два элемента встроенного блока: 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> 

Fiddle

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

Answer 1

Вот Fiddle

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

Это решение использует calc() (CSS3), поэтому, если вам нужна более старая поддержка браузера, используйте вместо этого скрипт. также, если вы можете использовать обычный макет (div s вместо макета списка), это можно сделать, используя макет таблицы 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; 
}