html - 正在自动调整 div

Question

我正在尝试建立一个日历。

我正在使用 Div 和 span 来构建结构。

问题是当我调整页面大小时，div 会自动缩小。

我怎样才能防止这种情况发生？我尝试使用最小宽度，但它不起作用，因为有很多不同的屏幕，我想构建响应式的东西(我将使用媒体查询)。

JSFiddle:http://jsfiddle.net/F3zW3/

CSS

.c-col-1 div, .c-col-2 div, .c-col-3 div, .c-col-4 div, .c-col-5 div{
float:left;
display:inline-block;
width: 170px;
height: 110px;
margin-left: 3px;
margin-bottom: 3px;
background-color: green;
}

.c-col-1 span, .c-col-2 span, .c-col-3 span, .c-col-4 span, .c-col-5 span{
font-size: 24px;
font-family: 'Lato', Arial, sans-serif;
line-height: 1.3;
color:white;
text-shadow: 1px 1px #666666;
font-weight: 300;
}

.c-col-5 div{
margin-bottom: 15px;
}


.c-col-1 .c-empty, .c-col2 .c-empty, .c-col-3 .c-empty, .c-col-4 .c-empty, .c-col-5 .c-empty{
background-color: transparent;
}

HTML

<div class="c-col-1">
<div class="c-empty"></div>
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
</div>

<div class="c-col-2">
<div><span>7</span></div>
<div><span>8</span></div>
<div><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
<div><span>12</span></div>
<div><span>13</span></div>
</div>

<div class="c-col-3">
<div><span>14</span></div>
<div><span>15</span></div>
<div><span>16</span></div>
<div><span>17</span></div>
<div><span>18</span></div>
<div><span>19</span></div>
<div><span>20</span></div>
</div>

<div class="c-col-4">
<div><span>21</span></div>
<div><span>22</span></div>
<div><span>23</span></div>
<div><span>24</span></div>
<div><span>25</span></div>
<div><span>26</span></div>
<div><span>27</span></div>
</div>


<div class="c-col-5">
<div><span>28</span></div>
<div><span>29</span></div>
<div><span>30</span></div>
<div><span>31</span></div>
<div class="c-empty"></div>
<div class="c-empty"></div>
<div class="c-empty"></div>
</div>

Answer 1

与其将 div 的宽度硬编码为像素，不如将其设为百分比

http://jsfiddle.net/F3zW3/1/ -- 演示

.c-col-1 div, .c-col-2 div, .c-col-3 div, .c-col-4 div, .c-col-5 div{
   float:left;
   display:inline-block;
   width: 15%; // This is the only change i made
   height: 110px;
   margin-left: 3px;
   margin-bottom: 3px;
   background-color: green;
}