主页 / 问题 / 1048551
Accepted
E1mir
Asked:2020-11-20 23:31:20 +0000 UTC2020-11-20 23:31:20 +0000 UTC

定位块从容器级别开始

  • 772

布置网站时，我无法对齐块..

我在容器中有一个不应超出其框架的块。但是该块较低，它从容器级别开始，但在设备屏幕本身的末尾结束，而不是容器本身。

如何计算该缩进以使块更低.another-block

.another-block {
  /*Я не знаю как тут вычислить отступ*/
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="block"> Элементы этого блока не должны выходить за рамки контейнера, как бы сильно я этого не хотел
        </div>
      </div>
    </div>
  </div>
  <div class="another-block">
    Начало данного элемента должна начинаться с уровня контейнера, но конец должен быть, аж до конца самого экрана устройства
  </div>
</section>

这里大概是下面的结果，我希望它和我在一起，但我不知道该怎么做。

在此处输入图像描述

html

1 个回答

  1. Best Answer

    你可以这样做。调整站点大小时，块将自动对齐，保持其位置。你只需要max-width根据你的模板的内容区域的大小进行操作，你就是通过改变块的大小来做的！（可以设置固定）

    .cont {
  max-width: 90%;
  margin: 0 0 0 auto;
}

.block {
  width: 100%;
  max-width: 90%;
  background: yellow;
  padding: 30px;
}

.block--red {
  background: red;
  color: white;
}
.block--right {
  max-width: 100%;
}
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section>
  <div class="cont">
    <div class="block"> 
      <h1>CONTENT</h1>
      <p>Элементы этого блока не должны выходить за рамки контейнера, как бы сильно я этого не хотел</p>
    </div>
    <div class=" block block--red block--right">
      <h1>CONTENT 2</h1>
      <p>Начало данного элемента должна начинаться с уровня контейнера, но конец должен быть, аж до конца самого экрана устройства</p>
    </div>
  </div>
  
</section>

    UPD在这里使用纯引导程序。container但需要更换container-fluid，否则将无法正常工作。常规容器具有左右填充和 auto margin。如果不对框架提供的给定容器进行样式设置，就无法右对齐元素！而且你another-block的需要塞在容器里面，否则两个都不能从共同点算起！

    .block {
  background: yellow;
  padding: 30px;
}

.block--red {
  background: red;
  color: white;
}
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section>
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-6 block"> 
        <h1>CONTENT</h1>
        <p>Элементы этого блока не должны выходить за рамки контейнера, как бы сильно я этого не хотел</p>
      </div>
    </div>
    <div class="row justify-content-end">
      <div class="col-9 block block--red"> 
        <h1>CONTENT</h1>
        <p>Элементы этого блока не должны выходить за рамки контейнера, как бы сильно я этого не хотел</p>
      </div>
    </div>
  </div>
  
</section>

    • 1

相关问题