Как я могу заставить мою обертку кровоточить вправо в определенном разделе? - PullRequest
Новая
       22

Как я могу заставить мою обертку кровоточить вправо в определенном разделе?

1 голос
/ 02 октября 2019

Для проекта у меня есть страница, где все находится в обертке, и я масштабирую эту обертку по мере увеличения размера экрана. Представьте, что каждая ячейка представляет собой сечение.

Средняя часть кровоточит вправо, но сохраняет то же поле слева, что и оболочка. Я не знаю точную ширину сечения + поля справа, и если я это сделаю, то когда он масштабируется, он изменится. Я хочу, чтобы левая сторона масштабировалась в линию с другими разделами, поскольку браузер изменяется так же, как и в обычной оболочке.

https://codepen.io/seandaniel/pen/oNvKjop

   .wrapper {
      width: 60rem;
      margin: 0 auto;
    }
    
    .section-1 {
      background-color: black;
      width: 100%;
      height: 200px;
    }
    
    .section-2 {
      background-color: blue;
      /*   this width is just to show what I want it to look like */
      width: 1224px;
      height: 200px;
      margin-left: auto;
    }
    
    .section-3 {
      background-color: orange;
      width: 100%;
      height: 200px;
    }
     <main>
      <div class="wrapper">
        <section class="section-1">
        </section>
      </div>
        <section class="section-2">
        </section>
      <div class="wrapper">
         <section class="section-3">
          </section>
      </div>
    </main>
enter image description here

Ответы [ 2 ]

0 голосов
/ 02 октября 2019
  1. В вашем классе .section-2 добавьте следующее правило css margin-right: calc(50% - 50vw);
  2. Вам также нужно будет вложить ваш <section class="section-2"></section> в тот же <div class="wrapper"></div>, что и другие разделы, чтобы иметь тот жевыравнивание по левому краю.

Если вы хотите, чтобы он кровоточил влево, используйте margin-left: calc(50% - 50vw); вместо margin-right, или они должны иметь полную ширину.

Эта страница имеет много хорошегоинформация о манипуляциях с полями внутри контейнера. Контейнеры полной ширины в родительских элементах ограниченной ширины 

.wrapper {
    width: 60rem;
    margin: 0 auto;
}
.section-1 {
    background-color: black;
    width: 100%;
    height: 200px;
}
.section-2 {
    background-color: blue;
    height: 200px;
    margin-right: calc(50% - 50vw);
}
.section-3 {
    background-color: orange;
    width: 100%;
    height: 200px;
}
<main>
    <div class="wrapper">
        <section class="section-1">
        </section>
    </div>
    <div class="wrapper">
        <section class="section-2">
        </section>
    </div>
    <div class="wrapper">
        <section class="section-3">
        </section>
    </div>
</main>
0 голосов
/ 02 октября 2019

Это то, что вы хотите, чтобы произошло? Обертка останется на одинаковом расстоянии от левой стороны, несмотря ни на что. Хотя я не уверен, что вы хотите, чтобы ваша обертка всегда была в центре (x, y).

CSS 

.wrapper {
  border: 1px solid green;
  width: 100%;
  position: absolute;
  left: 45px;
}

.section-1 {
  background-color: black;
  width: 100%;
  height: 200px;
  position: relative;
}

.section-2 {
  background-color: blue;
  width: 125%;
  height: 200px;
  margin-left: auto;
  position: relative;
}

.section-3 {
  background-color: orange;
  width: 100%;
  height: 200px;
  position: relative;
}
<main>
  <div class="wrapper">
    <section class="section-1">
    </section>
    <section class="section-2">
    </section>
     <section class="section-3">
      </section>
  </div>
</main>
...