2 列布局，分割 1 个三分之一/2 个三分之二，包含内容但背景延伸到浏览器边缘

Question

我在这里创建了一个代码笔来显示我的问题： https://codepen.io/nintokev/pen/abqOoEr

我有一个 50 / 50 分割布局，它按照我想要的方式工作，每列的文本内容包含在一个整体 1260px 容器中，但背景扩展到此容器之外。

我尝试创建一个 ⅓ ⅔ 分割布局来执行相同的操作，并且它可以达到一定的屏幕尺寸，但当您扩展屏幕时，文本内容将停止与 50 / 50 内容对齐。

我可以将媒体查询添加到更大尺寸的屏幕来提供帮助，但我正在寻找一种适用于所有尺寸的更优雅的解决方案

参见 codepen，当您增大窗口大小时，文本对齐方式开始从上面的 50 / 50 块中断

<h2>Two column contained with full width background and contained content</h2>
    <section>
     <div class="article-grid">
    <article>
      <div class="article-inner-grid">
        <div class="article-padding">
      <header>
        <h2>Heading 1</h2>  
      </header>
      <div class="entry-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In enim lorem, sollicitudin ut accumsan in, porta sed dui. Sed sagittis est risus, ac luctus odio porta at. </p>

      </div>
      </div>
      </div>
    </article>
    <article>
      <div class="article-inner-grid">
        <div class="article-padding">
      <header>
        <h2>Heading 2</h2>  
      </header>
      <div class="entry-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In enim lorem, sollicitudin ut accumsan in, porta sed dui. Sed sagittis est risus, ac luctus odio porta at. </p>
          </div>
      </div>
      </div>
    </article>
   </div>
</section>
  <h2>Two column 1/3 2/3 with full width background and contained content</h2>
  <section>
  <div class="article-grid">
    <article class="one-third">
      <div class="article-inner-grid">
        <div class="article-padding">
      <header>
        <h2>Heading 1</h2>  
      </header>
      <div class="entry-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In enim lorem, sollicitudin ut accumsan in, porta sed dui. Sed sagittis est risus, ac luctus odio porta at.</p>



      </div>
      </div>
      </div>
    </article>
    <article class="two-thirds">
      <div class="article-inner-grid">
        <div class="article-padding">
      <header>
        <h2>Heading 2</h2>  
      </header>
      <div class="entry-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In enim lorem, sollicitudin ut accumsan in, porta sed dui. Sed sagittis est risus, ac luctus odio porta at.</p>
          </div>
      </div>
      </div>
    </article>
   </div>
</section>

.article-container{
max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}
section{
margin-bottom:2rem;}

.article-grid{
  display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
}
article{
  flex:1;
  display: flex;
  font-family: arial;
}
article:nth-of-type(1){
  background-color:blue;
  color:white;
  justify-content: flex-end;
}
article:nth-of-type(2){
  background-color:red;
  color:white;
  justify-content: flex-start;
}

.article-inner-grid{
width:calc(#{$container} /2);
  max-width: calc(#{$container} /2);
}
.article-padding{
  padding:2rem;

}
h2{font-family: arial;}


article.one-third{
  flex:1  33%;
}
article.two-thirds{
    flex: 2  auto ;
}

article.one-third .article-inner-grid{
width:calc(#{$container} /3);
  max-width: calc(#{$container} /3);

}

article.two-thirds .article-inner-grid{
width:calc((#{$container} / 3) * 2);
  max-width: calc((#{$container} / 3) * 2);

}

Answer 1

calc() 是一种方法。

例如设置一个容器，为直接子级保留最大宽度 560px（以适应片段的大小）。这对于稍后在这个最大宽度区域中放置完整的背景和内容很有用。

div {
  padding: 0 calc(50vw - 280px); 
}

<div>
<hr>
<h1 style="font-size:1.1rem;text-align:center">how do i get the width to keep empty both sides once the view exceeds 560px of width ?</h1>
<p>If no elements are standing there to be resized, then use padding</p>
<p>take half of the screen's width and remove half of the max-width expected for the content.</p>
<p style="text-align:center"> 50vw - 280px </p>
<p> Use that result to set the padding for both left and right</p>
<h2 style="text-align:center">Check it out</h2>
<p>Run the snippet in FullPage and resize your browser's window</p>
<p>Note: negative value are invalid, so no padding will be applied below a 1200px screen's width</p>
<hr>
</div>

放置背景的想法大致相同，您需要 calc() 来为您进行数学计算： 1200px 和背景图像（渐变或图像）中的示例，您可以在其中计算从中心的偏移位置减去第一个最大尺寸的一半。

低于 1200px ，将需要在其他地方重置或设置背景值（负值不会被忽略或将禁用规则）。

* {
  padding: 0;
  margin: 0;
}

.child-1200 {
  padding: 0 calc(50vw - 600px);
  /* negative values are invalid = no padding */
  background: linear-gradient(to right, blue calc(50% - (200px - 1em)), red calc(50% - (200px - 1em))) 70% 0 / 101% 100%;
  color: white;
}

article {
  padding: 1em;
}

.one-two {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1em
}

.child-1200.bgimg {
  display: block;
  background: url(https://picsum.photos/id/56/2880/1920) 0 0/ calc(50% - (200px - 1em)) auto no-repeat, url(https://picsum.photos/id/55/4608/3072) 100% 0 / 66.66% auto;
}

@media screen and (max-width:1200px) {
  .one-small {
    display: block;
  }
  .one-small article {
    background: blue
  }
  .one-small article:nth-child(odd) {
    background: red;
  }
  .bgimg .one-small article {
    background: url(https://picsum.photos/id/56/2880/1920) 0 0/ 100% auto;
  }
  .bgimg .one-small article:nth-child(odd) {
    background: url(https://picsum.photos/id/55/4608/3072)0 0/ 100% auto;
  }
}

<section class="child-1200">
  <div class="one-two one-small">
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
  </div>
  <div class="one-two one-small">
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
  </div>
  <div class="one-two one-small">
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
  </div>
</section>
<section class="child-1200 bgimg">
  <div class="one-two one-small">
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
  </div>
  <div class="one-two one-small">
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
  </div>
  <div class="one-two one-small">
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
  </div>
</section>

我希望这对您有用并且我理解您的问题:)