主页 / 问题 / 1284179
Accepted
Komend
Asked:2022-05-20 20:07:02 +0000 UTC2022-05-20 20:07:02 +0000 UTC

更改比例时我无法理解对象的定位及其位置

  • 772

我无法弄清楚元素定位是如何工作的。有一个父元素。我这样做了position: relative; ，有 4 个元素是从父元素定位的。position: absolute; 看来我理解正确。

结果是这样的： 在此处输入图像描述

据我了解，所有дочерние元素都由Родителя. 但是当我改变窗口的比例时，父级的大小会改变。据我了解，子元素的位置应该改变。但他们并没有改变他们的位置，他们仍然在同一个地方，超越了父母。

例子：

在此处输入图像描述

我试图使所有内容都以百分比为单位 但是当缩放时，元素会被自己抛出，但我不需要这个。我的显示器分辨率是 1920x1080。我认为对一些人来说会更多，对一些人来说会更少。一切都会显得愚蠢。

如何在缩放时使它们定位并且不相互碰撞？我请求你的帮助！或者简单的解释。提前致谢！

css和html代码：

#main_container{
    position: relative;
    padding: 20px;
    background-color: #fff;
}

.demonstation{
    position: relative;
}
.gift_icon{
    margin-left: 250px;
    border-radius: 10px 1px;
     box-shadow:
   0 1px 4px rgba(0, 0, 0, .3),
   -23px 0 20px -23px rgba(0, 0, 0, .8),
   23px 0 20px -23px rgba(0, 0, 0, .8),
   0 0 40px rgba(0, 0, 0, .1) inset;
   width: 840px;
   height: 460px;
}

.heading{
    position: absolute;
    left: 1300px;
    top: 0;
    letter-spacing: 3px;
    font-size: 25px;
}
.info{
    position: absolute;
    top: 70px;
    left: 1276px;
    letter-spacing: 1px;
}
.info li{
    margin-bottom: 10px;
    font-size: 14px;
}

.btn{
    position: absolute;
    left: 1305px;
    bottom: 0px;
    font-size: 20px;
    font-family: monospace;
    color: #fff;
    background: linear-gradient(to left, #2b3537, #121617, #2b3537);
    text-decoration: none;
    padding: 20px 70px;
    border-radius: 10px 1px;
    background-size: 200%;
    transition: 0.5s;
}

.btn:hover{
    background-position: right;
}
<div id="main_container">
        <div class="container">
      <div class="demonstation">
        <img class="gift_icon" src="\public\images\test.jpg" alt="Нет отображения">
        <h2 class="heading">Заголовок</h2>
        <ul class="info">
          <li>Информация</li>
          <li>Информация</li>
          <li>Информация</li>
          <li>Информация</li>
          <li>Информация</li>
          <li>Информация</li>
        </ul>
        <a href="#" class="btn">Подробнее</a>
      </div>
    </div>
</div>

父级的大小根据图片而变化。main_container这是用于从页脚和页眉填充。Container网站中间的内容。

html

1 个回答

  1. Best Answer

    使用弹性。我把你所有的描述都放在一个容器里。删除了所有绝对的。设置演示块display: flex并将justify-content: center页面对齐和居中。现在是这样的

    #main_container{
    position: relative;
    padding: 20px;
    background-color: #fff;
}

.demonstation{
    position: relative;
    display: flex;
    gap: 20px;
    justify-content: center;
}
.gift_icon{    
    border-radius: 10px 1px;
     box-shadow:
   0 1px 4px rgba(0, 0, 0, .3),
   -23px 0 20px -23px rgba(0, 0, 0, .8),
   23px 0 20px -23px rgba(0, 0, 0, .8),
   0 0 40px rgba(0, 0, 0, .1) inset;
   width: 840px;
   height: 460px;
}


.heading{    
    letter-spacing: 3px;
    font-size: 25px;
}
.info{
    
    letter-spacing: 1px;
}
.info li{
    margin-bottom: 10px;
    font-size: 14px;
}

.btn{
    
    font-size: 20px;
    font-family: monospace;
    color: #fff;
    background: linear-gradient(to left, #2b3537, #121617, #2b3537);
    text-decoration: none;
    padding: 20px 70px;
    border-radius: 10px 1px;
    background-size: 200%;
    transition: 0.5s;
}

.btn:hover{
    background-position: right;
}
    <div id="main_container">
        <div class="container">
      <div class="demonstation">
        <img class="gift_icon" src="\public\images\test.jpg" alt="Нет отображения">
        <div class="desc">
            <h2 class="heading">Заголовок</h2>
            <ul class="info">
              <li>Информация</li>
              <li>Информация</li>
              <li>Информация</li>
              <li>Информация</li>
              <li>Информация</li>
              <li>Информация</li>
            </ul>
            <a href="#" class="btn">Подробнее</a>
        </div>      
      </div>
    </div>
</div>

    • 1

相关问题