如何设置颜色超出容器从侧面 [英] How to set color goes beyond container from sides

问题描述

在下面的例子中，我怎么能设置侧边栏的 background-color 继续到页面的右边？

$ b $ PS：我必须用容器来放置整个内容。

这是一个 codepen 。下面的代码片段：

.container {max-width：1366px; margin-left：auto; margin-right：auto;}。columnContainer {display：flex; flex-direction：column; flex-flow：排行; position：relative;}。articleContainer {order：1; width：75％;}。articleSidebar {width：25％;次序：2; < div class = = 容器 > < div class = columnContainer> < div class =articleContainer>文章< / div> < div class =articleSidebar>文章侧边栏< / div> < / div>< / div>

首先，让我们删除默认的浏览器页边距：

  body {
 margin：0; 
 
 $ / code $ <$ $ $ $ <$ $ $ $ $ 并将 flex-direction 更改为行（默认），并删除订单  - 。
 
 
  .columnContainer {
 display：flex; 
} 
 .articleContainer {
 width：75％; 
} 
 .articleSidebar {
 width：25％; 
背景颜色：＃F4F4F4; 
 
  
  
 
 
使用flexbox技术应用最大宽度 - 设置 flex-grow 为零，并设置 flex-basis 为1366px。 
 
 
  flex：0 1 1366px; 
  
 
 
 
 
新增 justify-content：space-around  
 
 
 $  
 
 
 
 
 
 
  body {margin：0 ;}。container {display：flex; justify-content：space-around;}。columnContainer {display：flex; flex：0 1 1366px;}。articleContainer {width：75％;}。articleSidebar {width：25％;   < div class = = 容器 > < div class = columnContainer> < div class =articleContainer>文章< / div> < div class =articleSidebar>文章侧边栏< / div> < / div>< / div>  

解决方案：



我不知道为什么您需要将侧边栏的背景颜色继续放在页面的右侧因为它不可能以 max-width：1366px 限制为中心，并且让它继续到最右边。

所以这里有一些选项：

选项1 ：
您可以即兴创作一些虚拟元素来分担责任：

1. '虚拟'元素作为容器的子元素，并允许他们到 flex ：

     .container> * {
    flex：1; 
    
     




2. last-child dummy将有 background-color 与 articleSidebar 相同，所以它看起来像右边colmn的背景延伸到最右端。

data-lang =jsdata-hide =truedata-console =truedata-babel =false>

  body {margin：0;}。container {display：flex; justify-content：space-around;}。container> * {flex：1;}。container div：last-child {background-color：＃F4F4F4;}。columnContainer {display：flex; flex：0 1 1366px;}。articleContainer {width：75％;}。articleSidebar {width：25％;   < div class = = 容器 > < div class =dummy>< / div> < div class = columnContainer> < div class =articleContainer>文章< / div> < div class =articleSidebar>文章侧边栏< / div> < / DIV> < div class =dummy>< / div>< / div>  

选项2 ：



将您的容器正确地使用 justify-content：flex-end 让列向右延伸，有效地对齐它们。



body {margin：0;}。 justify-content：flex-end;}。columnContainer {display：flex; flex：0 1 1366px;}。articleContainer {width：75％; flex：1;}。articleSidebar {width：25％; background-color：＃F4F4F4; flex：1;}

 < div class =container > < div class = columnContainer> < div class =articleContainer>文章< / div> < div class =articleSidebar>文章侧边栏< / div> < / div>< / div>  

On below example how can I set the background-color of the sidebar continue to the right side of the page?

PS: I have to use container to center the whole content.

Here is a codepen. Snippet below:

.container {
  max-width: 1366px;
  margin-left: auto;
  margin-right: auto;
}
.columnContainer {
  display: flex;
  flex-direction: column;
  flex-flow: row wrap;
  position: relative;
}
.articleContainer {
  order: 1;
  width: 75%;
}
.articleSidebar {
  width: 25%;
  order: 2;
  background-color: #F4F4F4;
}

<div class="container">
  <div class=columnContainer>
    <div class="articleContainer">article</div>
    <div class="articleSidebar">article sidebar</div>
  </div>
</div>

Regards

解决方案

1. First of all, lets remove the default browser margin by:

   body {
     margin: 0;
   }
   

2. Removed the flex-wrap and changed flex-direction to row (default) and removed the orders- which works better here.

   .columnContainer {
     display: flex;
   }
   .articleContainer {
     width: 75%;
   }
   .articleSidebar {
     width: 25%;
     background-color: #F4F4F4;
   }
   

3. Applied max-width using flexbox techniques- set flex-grow to zero and setting flex-basis to 1366px.

   flex: 0 1 1366px;
   

4. Added justify-content: space-around to center the container instead of auto margins.

snippet below:

body {
  margin: 0;
}
.container {
  display: flex;
  justify-content: space-around;
}
.columnContainer {
  display: flex;
  flex: 0 1 1366px;
}
.articleContainer {
  width: 75%;
}
.articleSidebar {
  width: 25%;
  background-color: #F4F4F4;
}

<div class="container">
  <div class=columnContainer>
    <div class="articleContainer">article</div>
    <div class="articleSidebar">article sidebar</div>
  </div>
</div>

Solution:

I don't know why you need to have background-color of the sidebar continue to the right side of the page because it is not possible both to center it with a max-width: 1366px restriction and along with that let it continue to the far right.

So here are some options:

Option 1: You can improvise with some 'dummy' elements to share the duty:

1. 'Dummy' elements as children of container and allow them to flex:

   .container > * {
     flex: 1;
   }
   

2. And the last-child dummy will have background-color same as that of articleSidebar so that it will look like the right colmn's background stretch to the far right end.

body {
  margin: 0;
}
.container {
  display: flex;
  justify-content: space-around;
}
.container > * {
  flex: 1;
}
.container div:last-child {
  background-color: #F4F4F4;
}
.columnContainer {
  display: flex;
  flex: 0 1 1366px;
}
.articleContainer {
  width: 75%;
}
.articleSidebar {
  width: 25%;
  background-color: #F4F4F4;
}

<div class="container">
  <div class="dummy"></div>
  <div class=columnContainer>
    <div class="articleContainer">article</div>
    <div class="articleSidebar">article sidebar</div>
  </div>
  <div class="dummy"></div>
</div>

Option 2:

Align your container to the right using justify-content: flex-end to let the column extend to the right, effectively right aligning them.

body {
  margin: 0;
}
.container {
  display: flex;
  justify-content: flex-end;
}
.columnContainer {
  display: flex;
  flex: 0 1 1366px;
}
.articleContainer {
  width: 75%;
  flex: 1;
}
.articleSidebar {
  width: 25%;
  background-color: #F4F4F4;
  flex: 1;
}

<div class="container">
  <div class=columnContainer>
    <div class="articleContainer">article</div>
    <div class="articleSidebar">article sidebar</div>
  </div>
</div>

这篇关于如何设置颜色超出容器从侧面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！