相對div內的CSS響應式絕對div

Question

我對CSS相對較新，我正在嘗試構建一個原型，在該原型中我有一個大的Div，其中特定位置有幾個div。 我希望這些div始終占據該位置，但我希望它能夠做出響應。

嘗試了幾種不同的方法后，我的代碼有點遍地開花，但是黃色的div是我要制作的。 我想以循環方式放置所有其他div，但希望它們始終使用父div的空間的百分比並縮小，但保持與父div相同的“相對”位置。

 var openSide = false; function side() { if (!openSide) { document.getElementById("main").style.marginLeft = "15%"; document.getElementById("main").style.paddingLeft = "10px"; document.getElementById("mySidebar").style.width = "15%"; document.getElementById("mySidebar").style.display = "block"; // document.getElementById("openNav").style.display = 'none openSide = true; } else { document.getElementById("main").style.marginLeft = "0%"; document.getElementById("mySidebar").style.display = "none"; document.getElementById("openNav").style.display = "inline-block"; openSide = false; } console.log(openSide); } 

 /* The sidebar menu */ .sidenav { /*/height: 100%; /* Full-height: remove this if you want "auto" height */ width: 15%; /* Set the width of the sidebar */ position: fixed; /* Fixed Sidebar (stay in place on scroll) */ z-index: 1; /* Stay on top */ top: 70; /* Stay at the top */ left: 0; background-color: #111; /* Black */ overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 20px; display: none; margin-left: 10px; } /* The navigation menu links */ .sidenav a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 25px; color: #818181; display: block; } /* When you mouse over the navigation links, change their color */ .sidenav a:hover { color: #f1f1f1; } /* Style page content */ #main { margin-left: 0%; /* Same as the width of the sidebar */ margin-right: 15%; padding-left: 10px; padding-right: 20px; } body { margin-left: 10px; } .flex-container { display: flex; background-color: DodgerBlue; } .flex-container>div { background-color: red; margin: 10px; padding: 20px; font-size: 30px; } #map { /*padding: 100px 100px 100px 100px;*/ position: relative; width: 100%; height: 600px; top: 100px; background: yellow; } .media { position: absolute; width: 11.07%; height: 16.66%; background-color: red; } .media:first-child { margin-top: 15; } #m1 { background: blue; left: 400px; top: 400px; } .media:hover { background-color: pink; z-index: 1000; width: 200px; height: 200px; } /* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */ @media screen and (max-height: 450px) { .sidenav { padding-top: 15px; } .sidenav a { font-size: 18px; } } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/css.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button id="openNav" class="w3-button w3-teal w3-xlarge" onclick="side()">&#9776;</button> <div id="header"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </div> </nav> </div> <!-- Side navigation --> <div class="sidenav" id="mySidebar"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <div id="main"> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> <div id="map"> <div class="container"> <div class="media" style="left:465px;top:340px; background:red;">h</div> <div class="media" style="left:530px;top:250px; background:blue;">g</div> <div class="media" style="left:465px;top:175px;background:green ">f</div> <div class="media" style="left:400px;top:100px;background:red">e</div> <div class="media" style="left:335px;top:175px; background:blue">d</div> <div class="media" style="left:270px;top:250px; background:green;">c</div> <div class="media" style="left:335px;top:325px;">b</div> <div class="media" id="m1">a</div> </div> </div> <div class='circle-container'> <a href='#' class='center'><img src='image.jpg'></a> <a href='#' class='deg0'><img src='image.jpg'></a> <a href='#' class='deg45'><img src='image.jpg'></a> <a href='#' class='deg135'><img src='image.jpg'></a> <a href='#' class='deg180'><img src='image.jpg'></a> <a href='#' class='deg225'><img src='image.jpg'></a> <a href='#' class='deg315'><img src='image.jpg'></a> </div> <div class="jumbotron text-center" style="margin-bottom:0"> <p>Footer</p> </div> </div> 

Answer 1

正如其他評論者所指出的那樣，在此處將%用作所包含元素的位置和尺寸都是一種很好的方法。

您還可以使用vmin來建立.container的width和height ，以確保無論是水平方向還是垂直方向減小視口，該視口整體上都保持可見。

工作示例：

 .container { position: relative; width: 100vmin; height: 100vmin; background-color: yellow; } .container div { position: absolute; width: 6%; height: 9%; transform: translateX(-50%); } .a { top: 60%; left: 50%; background-color: blue; } .b { top: 52%; left: 40%; background-color: red; } .c { top: 44%; left: 30%; background-color: green; } .d { top: 36%; left: 40%; background-color: blue; } .e { top: 28%; left: 50%; background-color: red; } .f { top: 36%; left: 60%; background-color: green; } .g { top: 44%; left: 70%; background-color: blue; } .h { top: 52%; left: 60%; background-color: red; } 

 <div class="container"> <div class="a"></div> <div class="b"></div> <div class="c"></div> <div class="d"></div> <div class="e"></div> <div class="f"></div> <div class="g"></div> <div class="h"></div> </div>