如何製作響應式格子？

我正在製作一個應用程序在HTML中使用CSS和div，它是一個餐廳菜單，我有一個線框，我必須遵守，所以我使用CSS內的像素定位不是百分比，所以打開網站時在最大化狀態的樣子：如何製作響應式格子？

enter image description here

但是詛咒的最小化它時，它的大小和位置不迴應說：

enter image description here

這裏是fiddle

****驗證碼：**

* CSS：

.buttonClass { 
    width: 381px; 
    height: auto; 
    text-align: center; 
    line-height: normal; 
    border-radius: 7px; 
    z-index: 3; 
    background-image: -webkit-linear-gradient(top,#FFF 0%,#91BDD6 100%); 
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%); 
    background-image: -ms-linear-gradient(top,#FFF,#91BDD6); 
    background-image: -o-linear-gradient(top,#FFF,#91BDD6); 
    background-image: linear-gradient(top,#FFF,#91BDD6); 
    border: solid #91BDD6 5px; 
    box-shadow: 0px 0px 0px 5px #fff, 5px 3px 12px #000000; 
    position: absolute; 
    right:0; 
    bottom:0; 
} 

.totalClass { 
    width: 376px; 
    height: 30px; 
    padding: 10px 10px; 
    text-align: center; 
    line-height: normal; 
    border-radius: 7px; 
    z-index: 3; 
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%); 
    position: absolute; 
    right: 0; 
    top: 700px; 
}

*格：

<div id="confirm" class="buttonClass"> 
    <div align="center">Confirm</div> 
</div>  

<div id="total" class="totalClass"> 
    <div align="left"></div> 
</div>

來源

2013-10-01 Refaat

爲什麼你不使用百分比？ –

，因爲我想要的總數，並在第一個圖像確認在預定義位置的div – Refaat

創建一個jsFiddle，我正在努力解決您的問題。 –

當你想改變的寬度或高度onclick =「」那麼你不妨使用javascript來改變尺寸。使用Javascript還可以更改對象的位置 - 查看它。

HTML

<div id="sidebar"></div> 
<button onclick="hide_sidebar()" />

CSS

#sidebar { 
width:200px; 
height:100%; 
float:right; 
margin:0 0 0 0; 
transition:0.25s 
}

function hide_sidebar() { 
document.getElementById("sidebar").style.width="0"; 
}

來源

2013-10-01 13:07:11 Comms

我能想到的是最簡單的方式：改變寬度：381px到最大寬度：381px並添加寬度：100％。這樣如果按鈕有足夠的位置，它將是381px寬，並且如果沒有地方它將適合給定的寬度。

的CSS代碼如下：

.buttonClass { 
    max-width: 381px; 
    width:100%; 
    height: auto; 
    text-align: center; 
    line-height: normal; 
    border-radius: 7px; 
    z-index: 3; 
    background-image: -webkit-linear-gradient(top, #FFF 0%, #91BDD6 100%); 
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%); 
    background-image: -ms-linear-gradient(top, #FFF, #91BDD6); 
    background-image: -o-linear-gradient(top, #FFF, #91BDD6); 
    background-image: linear-gradient(top, #FFF, #91BDD6); 
    border: solid #91BDD6 5px; 
    box-shadow: 0px 0px 0px 5px #fff, 5px 3px 12px #000000; 
    position: absolute; 
    right:0; 
    bottom:0; 
} 
.totalClass { 
    width: 376px; 
    height: 30px; 
    padding: 10px 10px; 
    text-align: center; 
    line-height: normal; 
    border-radius: 7px; 
    z-index: 3; 
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%); 
    position: absolute; 
    right: 0; 
    top: 700px; 
}

來源

2013-10-01 13:25:21

它不是一個大問題，只是給在像素該分區，把一個ID爲按鈕，並給該按鈕的寬度100％

例如：

button div id 
{ 
width:20px; 
height:20px; 
} 

#button 
{ 
width:100%; 
height:20px; 
}

然後繼續享受你的編碼

來源

2014-02-03 09:15:24 Ajis

如何製作響應式格子？

回答

相關問題