Отзывчивый DIV элемент

Question

Я это HTML:

<div class="styles container"> 
    <h1>Styles</h1> 
</div> 
<div class="preview container"> 
    <h1>Preview</h1> 
</div> 

Я хочу первый DIV быть статичным. Скажем, его ширина должна быть 265 пикселей. Дина .preview должен быть рядом с ним, но он должен быть отзывчивым (путем сокращения окна этот div также должен уменьшаться). Я попытался установить% на этот div, но все равно он идет ниже. Как я могу это исправить?

Answer 1

Прежде всего, DIV это элемент блока и начинает рендеринг с новой строки. Существует несколько методов для изменения поведения. Если вам не нужно поддерживать IE6/IE7 можно использовать встроенный блок стиль CSS, например:

<div> 
<div style="width:20%; display: inline-block;"> 
    <h1>1</h1> 
</div> 
<div style="width:70%; display: inline-block;"> 
    <h1>2</h1> 
</div> 
</div> 

Answer 2

Это ваше решение:

HTML:

<div class="parent"> 
<div class="styles"> 
    <h1>Styles</h1> 
</div> 
<div class="preview"> 
    <h1>Preview</h1> 
</div> 
</div> 

CSS:

.parent{ 
    width:100%; 
    white-space: nowrap; 
} 
.styles{ 
    width:265px; 
    display:inline-block; 
} 

.preview{ 
    width:auto; 
    display:inline-block; 
} 

Упование он решит проблему. Check Fiddle.