响应式 DIV 元素答案

【问题标题】：Responsive DIV element响应式 DIV 元素
【发布时间】：2015-05-02 12:36:59
【问题描述】：

我有这个HTML：

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

我希望第一个 div 是静态的。假设它的宽度为 265 像素。 .preview div 应该在它旁边，但它应该是响应式的（通过缩小窗口，这个 div 也应该缩小）。我尝试为这个 div 设置一个 % ，但它仍然低于。我该如何解决这个问题？

【问题讨论】：

标签： html static responsive-design width percentage

【解决方案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>

【讨论】：

【解决方案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。

【讨论】：