如何制作响应式div？

Question

我正在使用CSS和div制作HTML应用程序，这是一个餐馆菜单，我有一个必须遵守的线框，所以我在CSS中使用像素定位而不是百分比，所以当打开时处于最大化状态的网站看起来像：

但是当最小化它的诅咒时，它的大小和位置不会对此作出反应：

这里是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：

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

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

Answer 1

我能想到的最简单的方法是：改变宽度：381px到max-width：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;
}

Answer 2

当您想要更改宽度或高度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
}

<强> JS

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

Answer 3

这不是一个大问题，只需以像素为单位给出div并为该按钮添加一个ID并将该按钮宽度设为100％

前：

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

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

然后继续享受您的编码