css 基于视口的div定位更改

uklbhaso 于 2023-03-14 发布在其他

关注(0)|答案(4)|浏览(166)

我尝试在单击中心圆圈时显示4个圆圈，就像

.
但是，当我调整视区大小时，div的位置发生了变化，如下面的代码所示。我尝试将位置设为相对位置，但没有效果。https://codepen.io/Refath/pen/NJbEQO
下面是我们讨论的代码：

.subOne{
    position: relative;
    top: -200px;
    left: 445px;
}

.subTwo{
    position: relative;
    top: -650px;
    left: 445px;
}

.subThree{
    position: relative;
    top: -570px;
    left: 255px;
}

.subFour{
    position: relative;
    top: -670px;
    left: 650px;
}

我的一个想法是将子圆 Package 在一个单独的容器div中，并根据视口平移容器，尽管我不确定这是否可行。

css

来源：https://stackoverflow.com/questions/55015048/positioning-of-divs-changes-based-on-viewport

4条答案

按热度按时间

myzjeezk1#

如果在周围的项目和像素位置上使用position: relative，您将无法获得响应性很强的布局。
首先，使用position: relative时，元素相对于其原始位置而不是中心圆定位，这会导致未对准。
第二，用top: -670px; left: 650px;定位的元素在大屏幕上看起来不错，但在小屏幕上却远远超出了视口，这也会打乱对齐。
相反，使用position: absolute将周围的项从正常流中移除，使它们相对于其容器（使用position: relative），并使用百分比长度来适应。
revised codepen

$(document).ready(function() {

  $(".subOne").hide();
  $(".subTwo").hide();
  $(".subThree").hide();
  $(".subFour").hide();


  $(".mainCircle").bind('click', function() {
    $(this).toggleClass('blue');
    $(".subOne").slideToggle('fast');
    $(".subTwo").slideToggle('fast');
    $(".subThree").slideToggle('fast');
    $(".subFour").slideToggle('fast');

  });

});

body {
  margin: 0;
}

.container {
  position: relative;
}

.subContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: coral;
}

.mainCircle,
.subOne,
.subTwo,
.subThree,
.subFour {
  border: 2px red solid;
  height: 100px;
  width: 100px;
  border-radius: 100px;
  background: blue;
  transition: 0.3s ease all;
}

.subOne {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%); /* see link below for explanation */
}

.subTwo {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, 50%);
}

.subThree {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
}

.subFour {
  position: absolute;
  top: 50%;
  right: 20%;
  transform: translate(50%, -50%);
}

.mainCircle:hover {
  background: lightblue;
  transition: 0.3s ease all;
}

.blue {
  border: 10px black solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="subContainer">
    <div class="mainCircle"></div>
  </div>
  <div class="subOne"></div>
  <div class="subTwo"></div>
  <div class="subThree"></div>
  <div class="subFour"></div>
</div>

赞(0）回复(0）举报 2023-03-14

a8jjtwal2#

你可以用 * percentage * 代替pixels来获得布局，但是我会稍微修改一下标记，并使用一个 wrapping flexbox，如下所示：
1.移动你的圆圈到 * 伪元素 * 和他们的 * 悬停 * 风格。
1.在第一行放置一个 circle，在第二行放置三个（包括mainCircle），在最后一行放置一个-使用order属性确定 ordering，使用flex-basis确定每行的圆圈数。
1.你可以使用margin: 0 auto来使每个圆在它们的空间中居中。也可以使用align-content: space-around来使它们均匀对齐。
1.现在，您可以通过改变subContainer的height和width来 * 调整 * 相对距离。
参见以下演示：

$(document).ready(function() {
  $(".subOne").hide();
  $(".subTwo").hide();
  $(".subThree").hide();
  $(".subFour").hide();
  $(".mainCircle").bind('click', function() {
    $(this).toggleClass('blue');
    $(".subOne").slideToggle('fast');
    $(".subTwo").slideToggle('fast');
    $(".subThree").slideToggle('fast');
    $(".subFour").slideToggle('fast');
  });
});

body {
  overflow-y: none;
}

.container {
  background: coral
}

.subContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: space-around;
  flex-wrap: wrap;
  height: 97vh;
  height: 500px; /* ADJUST THIS */
  width: 500px;  /* ADJUST THIS */
  margin: 0 auto;
  background: coral;
}

.mainCircle,
.subOne,
.subTwo,
.subThree,
.subFour {
  flex: 0 0 auto;
}

.mainCircle:after,
.subOne:after,
.subTwo:after,
.subThree:after,
.subFour:after {
  content: '';
  display: block;
  border: 2px red solid;
  height: 100px;
  width: 100px;
  margin: 0 auto;
  border-radius: 100px;
  background: blue;
  transition: 0.3s ease all;
}

.mainCircle:hover:after {
  background: lightblue;
  transition: 0.3s ease all;
}

.blue:after {
  border: 10px black solid;
}

.subOne {
  order: 1;
  flex-basis: 100%;
}

.subTwo {
  order: 2;
  flex-basis: 33.33%;
}

.mainCircle {
  order: 3;
  flex-basis: 33.33%;
}

.subThree {
  order: 4;
  flex-basis: 33.33%;
}

.subFour {
  order: 5;
  flex-basis: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="subContainer">
    <div class="mainCircle"></div>
    <div class="subOne"></div>
    <div class="subTwo"></div>
    <div class="subThree"></div>
    <div class="subFour"></div>
  </div>
</div>

赞(0）回复(0）举报 2023-03-14

p8h8hvxi3#

您可以尝试使用transform：translate（）.我也会把中间的圆圈作为a：：before，并添加其他的圆圈作为子元素。

<div class = "container">
    <div class = "subContainer">
        <div class = "mainCircle">
        <div class = "subOne"></div>
        <div class = "subTwo"></div>
        <div class = "subThree"></div>
        <div class = "subFour"></div>
    </div>
</div>

body{
    overflow-y:none;
}

.subContainer{
    display: flex;
  align-items: center;
  justify-content: center;
  height: 97vh;
    background: coral;
}
.mainCircle:before {
    content: "";
    position: absolute;
} 
.mainCircle, .subOne, .subTwo, .subThree, .subFour{
    border: 2px red solid;
    height: 100px;
    width: 100px;
    border-radius: 100px;
    background: blue;
    transition: 0.3s ease all;
}

.mainCircle:hover{
    background: lightblue;
    transition: 0.3s ease all;
}

.blue{
    border: 10px black solid;
}

.subOne{
    transform: translate(-100%, -100%);
}

.subTwo{
    transform: translate(100%, -200%);
}

.subThree{
    transform: translate(-100%, -100%);
}

.subFour{
    transform: translate(100%, -200%);
}

赞(0）回复(0）举报 2023-03-14

jq6vz3qz4#

它可以用一种相当简单的方式使用网格布局来完成。
width: 100vw和height: 100vh确保容器填充屏幕。
display: grid、grid-template-rows: 1fr 1fr 1fr和grid-template-columns: 1fr 1fr 1fr将可用空间分成3个等高/等宽的行/列。
容器上的align-items: center和justify-items: stretch以及子元素上的margin: auto使每个单元格的内容水平和垂直居中。
网格区域是为了方便。

.container {
    background: coral;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "TL TC TR"
        "ML MC MR"
        "BL BC BR";
    align-items: center;
    justify-items: stretch;
}

.subContainer{
    grid-area: MC;
    margin: auto;
}

.subOne{
    grid-area: TC;
    margin: auto;
}

.subTwo{
    grid-area: MR;
    margin: auto;
}

.subThree{
    grid-area: BC;
    margin: auto;
}

.subFour{
    grid-area: ML;
    margin: auto;
}

/* the rest is taken from the original CSS */

.mainCircle, .subOne, .subTwo, .subThree, .subFour{
    border: 2px red solid;
    height: 100px;
    width: 100px;
    border-radius: 100px;
    background: blue;
    transition: 0.3s ease all;
}

.mainCircle:hover{
    background: lightblue;
    transition: 0.3s ease all;
}

.blue{
    border: 10px black solid;
}

赞(0）回复(0）举报 2023-03-14

我来回答

css 基于视口的div定位更改

4条答案

相关问题

热门标签

最新问答