时间戳

首页 > 解决方案 > 相对图像上绝对定位 2 div 的问题

css - 相对图像上绝对定位 2 div 的问题

问题描述

使用 Bootstrap 4，我有一个初始设置为 2000px X 500px 的响应式图像，我想将 2 uls 的文本（它将是动态文本）放置在它的左右区域，并且当浏览器调整大小。

在文本 div 上使用相对图像 div 和绝对值，我最初可以正确定位文本，但是当浏览器调整大小时，LH 文本块自身表现完美，但右侧文本块向上爬（3rem）和向左爬（7rem ) b/t 1900 和 1400 像素。好像 RH 块不遵守 CSS transform:translate 规则，CSS 显示 -webkit-transform:translate(10%, 12%); 像现在一样。有人可以在这里给我一些指示吗？

.heroimg {
    position: relative;
}

.heroimg img {
    height: 100%;
    width: 100%;
}

.noticeboard {
    list-style-type: none;
}

.newstext {
    position: absolute;
    top: 60%;
    left: 15.8%;
    transform: translate(-60%, -15.8%);
    -moz-transform: translate(-60%, -15.8%);
    -webkit-transform: translate(-60%, -15.8%);
}

.nbtext span {
    color: black;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    letter-spacing: -1px;
    font-family: "Comic Sans MS";
    padding: 10px;
    display: inline-block;
}

.eventstext {
    position: absolute;
    bottom: 10%;
    right: 12%;
    transform: translate(10%, 12%);
    -moz-transform: translate(10%, 12%);
    -webkit-transform: translate(10%, 12%);
}
<div class="container-fluid">
    <div class="heroimg">
        <picture>
            <source
                srcset="img/posts2000x500.jpg"
                media="(min-width: 1400px)"
            />
            <source
                srcset="http://placehold.it/1400x500"
                media="(min-width: 1000px)"
            />
            <source srcset="http://placehold.it/1000x500" media="(min-width: 769px)" />
            <source srcset="http://placehold.it/800x500" media="(min-width: 577px)" />
            <img
                class=" img-fluid w-100 d-inline"
                srcset="http://placehold.it/600x500"
                alt=""
            />
        </picture>

        <div class="newstext nbtext">
            <span>
                <ul class="noticeboard">
                    <li>Hot News</li>
                    <li>Interesting Topical News</li>
                    <li>Amazing News</li>
                    <li>Fantastic News</li>
                    <li>Boring News</li>
                </ul></span
            >
        </div>
        <!--/newstext-->

        <div class="eventstext nbtext">
            <span>
                <ul class="noticeboard">
                    <li>Hot Events</li>
                    <li>Interesting Topical Event</li>
                    <li>Amazing Event</li>
                    <li>Fantastic Event</li>
                    <li>Boring Event</li>
                </ul></span
            >
        </div>
        <!--/eventstext-->
    </div>
    <!--/heroimg-->
</div>
<!--/container-fluid-->

标签： csstransformpositioningtranslateabsolute

解决方案

除非我遗漏了什么，否则这一切似乎都过于复杂了？

使用强大的 Flexbox https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

只需两个 CSS 属性，您就可以将ul列表放在相反的两侧。然后在您点击移动设备时使用媒体查询来平衡它。

*{
  margin:0;
  padding:0;
}

.pic{
  display:flex;
  justify-content:space-between;
  background:orange;
  padding:20px;
}
@media(max-width:769px){
  .pic{
    display:block;
  }
  .one{
    margin-bottom:50px;
  }
}
<div class="pic">
  <ul class="one">
    <li>Some item</li>
     <li>Some item</li>
     <li>Some item</li>
     <li>Some item</li>
     <li>Some item</li>
  </ul>
    <ul class="two">
    <li>Some item</li>
     <li>Some item</li>
     <li>Some item</li>
     <li>Some item</li>
     <li>Some item</li>
  </ul>
</div>

推荐阅读