css 如何将内容移出主要内容区域？

ncgqoxb0 于 2023-10-21 发布在其他

关注(0)|答案(1)|浏览(105)

screenshot of the problematic part of the layout I layout a training layout from figma.大部分内容都在1160 px宽的内容区域内，但一些照片和圆圈内容在该内容区域之外。将照片和圆圈移动到内容区域之外的最佳方法是什么？

<div class="big__title">
            <div class="header__other">
                <h1>robo school</h1>
                <p>Курсы повышения квалификации по робототехнике для педагогов начальной школы</p>
                <a href="" class="sign__btn">Записаться на курс</a>
            </div>
            <div class="woman">
                <img src="https://s3-alpha-sig.figma.com/img/75b1/c000/25b83366e2fa5d28f23b6174a9411adb?Expires=1698624000&Signature=YR02fL1dMyRubJQJK00FqUeNd2nKF5kZBNT60hfMCeoVm-g8IvepPEqn4PlEcmvVuGyzg04DnNr5i-t~W~Pt32~W2EnsGFWxPRXJ1BXR6ekuqeNu3qNHyxt3JKk7Tkfo5btrn7DRZAGb-Zh4B5hDulL0y68DIhv1o--jmQ46OGfriWftoZ63dTRL63M~~3Y49lr~AiOBApUaV5bkB~he9DsdHn-7IybDO5hvzpP2SzPv91Uo3WNcjZnJfuI8KH-4yNQj8knqyhfiUAthAbbLkAI-8VWrvb7vJroGBMuM0DuPHhYU-9xbGmajwOJz-gPJjmZkPQDg-POI9EIolpo0eg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
                    alt="">
            </div>
        </div>

.big__title {
    width: 100%;
    max-width: 1160px;
    margin: 0px auto;
    flex-wrap: wrap;
    h1 {
        color: #FFF;
            font-size: 70px;
            font-style: normal;
            font-weight: 600;
            line-height: 160%;
            /* 112px */
    }
    p {
        color: #FFF;
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 160%;
            /* 32px */
    }
    a {
        color:#FFF;
            text-align: center;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 160%;
            display: inline-block;
            border-radius: 5px;
            background: #D52027;
            padding: 25px 54px;
    }
}
.woman {
    img{
    width: 515px;
    }
}
.header__other
h1 {
    text-transform: uppercase;
}

P.S.我为我的英语提前道歉，由“DeepL”翻译
我唯一能想到的办法就是给图片所在的区块给予一个负的“margin-right”值，但没有用。

css

来源：https://stackoverflow.com/questions/77326331/how-do-move-content-outside-of-the-main-content-area

1条答案

按热度按时间

gr8qqesn1#

图像上的负右边距是我会使用的解决方案。我猜可能是你的CSS排列中的一个错误阻止了它生效？请记住，CSS嵌套仍然不完全支持。

body {
  background: navy;
  color: white;
  font-family: sans-serif;
}

.big__title {
  width: 1160px;
  max-width: 80%;
  margin: 0px auto;
  display: flex;
  gap: 2em;
  border: 1px solid white;
}  

.big__title h1 {
  font-size: 70px;
  font-style: normal;
  font-weight: 600;
  margin-top: 0;
}

.big__title p {
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.big__title a {
  color: inherit;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  display: inline-block;
  border-radius: 5px;
  background: #D52027;
  padding: 25px 54px;
}

.woman img {
  width: 215px;
  margin-right: -50px;
}

.header__other h1 {
  text-transform: uppercase;
}

<div class="big__title">
  <div class="header__other">
    <h1>robo school</h1>
    <p>Курсы повышения квалификации по робототехнике для педагогов начальной школы</p>
    <a href="" class="sign__btn">Записаться на курс</a>
  </div>
  <div class="woman">
    <img src="https://s3-alpha-sig.figma.com/img/75b1/c000/25b83366e2fa5d28f23b6174a9411adb?Expires=1698624000&Signature=YR02fL1dMyRubJQJK00FqUeNd2nKF5kZBNT60hfMCeoVm-g8IvepPEqn4PlEcmvVuGyzg04DnNr5i-t~W~Pt32~W2EnsGFWxPRXJ1BXR6ekuqeNu3qNHyxt3JKk7Tkfo5btrn7DRZAGb-Zh4B5hDulL0y68DIhv1o--jmQ46OGfriWftoZ63dTRL63M~~3Y49lr~AiOBApUaV5bkB~he9DsdHn-7IybDO5hvzpP2SzPv91Uo3WNcjZnJfuI8KH-4yNQj8knqyhfiUAthAbbLkAI-8VWrvb7vJroGBMuM0DuPHhYU-9xbGmajwOJz-gPJjmZkPQDg-POI9EIolpo0eg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4" alt="">
  </div>
</div>

赞(0）回复(0）举报 2023-10-21

我来回答

css 如何将内容移出主要内容区域？

1条答案

相关问题

热门标签

最新问答