我的HTML代码:
<div id="divMainFirst">
<div id="divInnerFirst">
<div id="divTitleHeaderUC">
<span id="spanTitleHeaderUC">Urgent Care Wait Time</span>
</div>
<div id="divSubTitleUC">
<div id="smallText" style="padding:0 5px; position: absolute; bottom: 1%; left: 0; right: 0; color: #000000; text-align: center;">If you are experiencing a life-threatening emergency, call 911 or go to your nearest emergency room. Do not go to the urgent care center.<br>Estimated wait times are provided for general information only, may change at any time, and may not reflect your actual wait time once you arrive.</div>
</div>
</div>
<div id="divInnerNext">
<div id="divTitleHeaderFD">
<span id="spanTitleHeaderFD">Find a Doctor</span>
</div>
<div id="divSubTitleFD">
<span style="width: 100%; text-align: center;">
<table cellpadding="5">
<tr>
<td class="alignLeft">By Name [<a href="physicians.aspx" class="blueLinks" title="View All Physicians">View All</a>]:</td>
</tr>
<tr>
<td style="padding-left: 15px;">
<select>
<option>TEST1</option>
<option>TEST2</option>
</select>
</td>
</tr>
<tr>
<td class="alignLeft">By Specialty [<a href="medical_specialties.aspx" class="blueLinks" title="View All Specialties">View All</a>]:</td>
</tr>
<tr>
<td style="padding-left: 15px;">
<select>
<option>TEST1</option>
<option>TEST2</option>
</select>
</td>
</tr>
<tr>
<td class="alignLeft">By Location [<a href="locations.aspx" class="blueLinks" title="View All Locations">View All</a>]:</td>
</tr>
<tr>
<td style="padding-left: 15px;">
<select>
<option>TEST1</option>
<option>TEST2</option>
</select>
</td>
</tr>
</table>
</span>
</div>
</div>
</div>
我的CSS代码:
#divMainFirst {
display: block;
margin: 0 0 0 200px;
overflow: hidden;
}
#divInnerFirst {
display: inline-block;
margin: 0 0 0 100px;
height: 270px;
padding: 0;
width: 265px;
vertical-align: top;
}
#divInnerNext {
display: inline-block;
margin: 0 0 0 50px;
height: 270px;
width: 265px;
vertical-align: top;
}
#divTitleHeaderUC {
width: 265px;
height: 40px;
background-color: #FFFFFF;
text-align: center;
box-shadow: inset 0 0 10px rgba(245, 159, 36, 0.5);
position: relative;
}
#spanTitleHeaderUC {
width: 100%;
height: 40px;
line-height: 40px;
vertical-align: middle;
background-color: #FFFFFF;
font-family: 'blackjarregular';
font-size: 18pt;
color: #F59F24;
font-weight: bold;
}
#divSubTitleUC {
width: 265px;
height: 220px;
background-color: #FFFFFF;
text-align: center;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-box-shadow: #F59F24 0px 2px 3px;
-moz-box-shadow: #F59F24 0px 2px 3px;
box-shadow: #F59F24 0px 2px 3px;
position: relative;
}
使用上面的HTML和CSS代码,它显示以下放大并默认情况下:
但是当我在不同大小的屏幕上查看它时,它会改变为:
正如你所看到的那样,盒子的大小没有改变,也没有缩小以适应所有三个盒子,而是溢出到前两个下面的下一部分,无法看到。
如何根据放大/屏幕尺寸修改框更改?
答案 0 :(得分:2)
查看@media queries
中的CSS
。
使用media queries
,您可以设置断点以更改CSS
处理内容,例如在某些元素不再需要时隐藏它们所使用的设备。
查看https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
这将为您提供更深入的查询背后的解释以及如何有效地使用它们。
答案 1 :(得分:1)
使用百分比来表示一切。或@media (min-width: 768px) {}