我已经查找了一百万种技术而且我无法使用它,我知道还有其他类似的帖子。我很抱歉,如果它有任何问题,但我需要具体的指令,因为我的代码因为我很愚蠢。非常感谢你提前!我希望div容器contentContactBox及其中的所有div在调整浏览器窗口大小时按比例调整大小。在contentcontactBox的左侧是一些文本,右侧是嵌入的谷歌地图。我希望它们都能与窗口的大小成比例缩小。
注意:我知道我可能需要取出位置:绝对的儿童divs
HTML:
<div id="contact" class="tab-pane fade in">
<div id="contentBoxContact">
<div id="map"></div>
<div id="contact-content">
<h1>Come see us downtown<br> and have a beer!</h1><br>
<h2 style="text-decoration: underline">Phone Number:</h2>
<h2>555-555-5555</h2><br>
<h2 style="text-decoration: underline">Email:</h2>
<h2>fakeemail@gmail.com</h2><br>
<h2 style="text-decoration: underline">Address:</h2>
<h2>
Fake Place<br>
414 2nd Avenue<br>
Fake Location<br>
</h2>
</div>
</div>
</div>
</div>
CSS:
body {
padding-top: 80px;
width: 100%;
height: 100%;
color: white;
background: url(/images/TaphouseTaps2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.tab-content{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#contentBoxContact {
margin-top: 54px;
width: 1185px;
height: 560px;
margin-left: -593px;
background: rgba(34,34,34,.75);
}
#contact-content {
position: absolute
margin-top: 8px;
margin-left: 40px;
line-height: 2px;
font-family: Titillium Web, Arial, Verdana, sans-serif;
color: white;
}
#map {
position: absolute;
width: 600px;
height: 500px;
margin-top: 30px;
margin-left: 550px;
}
答案 0 :(得分:4)
您可以使用vw值来制作与窗口成比例缩小的div。
HTML
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
CSS
.one {
width: 20vw;
height: 20vw;
background-color: #76ccde;
float: left;
margin-left: 10px;
}
.two {
width: 25vw;
height: 25vw;
background-color: #c976de;
float: left;
margin-left: 10px;
}
.three {
width: 30vw;
height: 30vw;
background-color: #a7de76;
float: left;
margin-left: 10px;
}
答案 1 :(得分:1)
我认为你需要在子div和父母使用中使用px代替%
height: auto;
width:auto;
答案 2 :(得分:-1)
我建议你看一下Bootstrap。它以动态着称;如果屏幕大小发生变化,则该页面的整个CSS都会发生变化。这是一个链接:Bootstrap 3。希望它有所帮助:)