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。

响应DIV元素

2 个答案: