CSS簡單的響應式設計

即時嘗試構建3個div。「left」，「Center」和「Right」全部浮動到左側，「左側」和「右側」div固定在寬度上（如側欄），「center」div（內容）爲自動或％當我重新調整我的瀏覽器的大小，例如（例如center div 60％），右邊的div被推到較低的位置，如果我使用（例如center div auto），我會得到「left」div，所有剩餘的空間和下面的「右」div。CSS簡單的響應式設計

我需要的是，「left」和「right」div固定尺寸爲250px，「Center」填充「左右」div之間的剩餘空間。（注：當然即時通訊使用媒體查詢）這個東西將對我有幫助，從750px到950px。）

<style type="text/css"> 
#left { 
float:left; 
height: 200px; 
width: 250px; 
border: medium dashed #03F; 
} 

#center { 
float:left; 
height: 200px; 
width: 60%; 
border: medium solid #C00; 
} 

#right { 
float:left; 
height: 200px; 
width: 250px; 
border: medium dashed #0C6; 
} 
</style> 


<div id="left"> 
</div> 

<div id="center"> 
</div> 

<div id="right"> 
</div>

來源

2014-01-30 Randy Geily

不使用CSS3媒體查詢，以適應每個屏幕尺寸，你會過得更好使用流體佈局。一世。基於百分比的所有列的大小，否則小型設備上的中心列將被壓扁。 – luke2012

您正在使用媒體查詢嗎？ –

檢查：http://jsfiddle.net/87enE/

創建wrapper和使用display:table;。然後使用dislay: table-cell子元素：

HTML：

<div id="wrapper"> 

    <div id="left"></div> 
    <div id="center"></div> 
    <div id="right"></div> 

</div>

CSS：

#wrapper{ 
    width: 100%; 
    display: table; 
} 

#left { 
    display: table-cell;  
    height: 200px; 
    width: 250px; 
    border: medium dashed #03F; 
} 

#center { 
    display: table-cell; 
    height: 200px; 
    border: medium solid #C00; 
} 

#right { 
    display: table-cell; 
    height: 200px; 
    width: 250px; 
    border: medium dashed #0C6; 
}

對於敏感的關注，更好地利用percentage，而不是fixed寬度：

小提琴：http://jsfiddle.net/87enE/3/

來源

2014-01-30 03:44:32 JunM

我看不到移動設備可以工作，中間的列將被壓扁。 – luke2012

@ luke2012我同意你的看法，但是這是要求的。 – tsterker

@tsterker這似乎是錯誤的，可能比從他們那裏獲得更多信息更好，而不僅僅是給他們提供不足的修復。當有人說敏感，我確定他們希望它能在較小的設備上工作，但這不會。 – luke2012

你sh請把所有div置於table tr td之下，並給予first和last td至修復大小您要（％）和center到100％。

試試這個：

<style type="text/css"> 
#left { 
float:left; 
height: 200px; 
width: 100%; 
border: medium dashed #03F; 
} 

#center { 
float:left; 
height: 200px; 
width: 100%; 
border: medium solid #C00; 
} 

#right { 
float:left; 
height: 200px; 
width: 100%; 
border: medium dashed #0C6; 
} 
</style> 


<table style="width:100%;"> 
<tr> 
<td style="width:20%;"> 
<div id="left"> 
</div> 
</td> 
<td style="width:60%;"> 
<div id="center"> 
</div> 
</td> 
<td style="width:20%;"> 
<div id="right"> 
</div> 
</td> 
</table>

這裏是一個demo

注：如果你想保持它反應靈敏，你需要給所有寬度%而不是px。你也可以得到關於媒體查詢的更多細節here

它應該幫助你！

謝謝。

來源

2014-01-30 03:58:45

在這種情況下，我相信FlexBox可以處理最好的情況。 #center的寬度將改變以佔據剩餘空間。

<style> 
#container { 
    display:flex; 
    flex-flow: row nowrap; 
} 
#left { 
    height: 200px; 
    width: 250px; 
    order:0; 
    border: medium dashed #03F; 
} 
#center { 
    flex:1; 
    order:1; 
    height: 200px; 
    border: medium solid #C00; 
} 
#right { 
    height: 200px; 
    width: 250px; 
    order:2; 
    border: medium dashed #0C6; 
} 
</style>

來源

2014-01-30 04:14:54 Azrael

你可以試試這個：

Fiddle Here:

<div id="wrapper" class="clearfix"> 

    <div class="div" id="left"> 
    </div> 
    <div class="div" id="center"> 
    </div> 
    <div class="div" id="right"> 
    </div> 

</div>

好運..

來源

2014-01-30 12:54:32

CSS簡單的響應式設計

回答

相關問題