響應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。