响应DIV元素

Question

我有这样的HTML：

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

我想第一个div是静态的。假设它的宽度是265像素。 .preview div应该在它旁边，但它应该是响应式的（通过缩小窗口，这个div也应该缩小）。我试图设置一个％到这个div，但仍然低于。我怎样才能解决这个问题？

Answer 1

首先，DIV是块元素，并开始从新行渲染。有很少的技术来改变行为。如果你不需要支持IE6/IE7你可以用inline-block的 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; 
} 

希望它能解决您的问题。查询Fiddle。