Question

我正在尝试制作日历。

我正在使用Divs和span进行结构。

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

我该如何防止这种情况？我尝试使用min-width，但它不起作用，因为有很多不同的屏幕，我想建立一些响应（我将使用媒体查询）。

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;
}

Answer 2

你可以让它像这样响应，你可以使用一个技巧，使用白色边框而不是边框，并结合边框框将使图像适合正确的宽度百分比从.container div的100％

<强> CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
.container{width:100%;overflow:auto;}
.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: 20%;
height: 110px;
border:solid white 1.5px;
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-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;
}

http://jsfiddle.net/F3zW3/4/

Div正在自动调整

2 个答案: