Question

所以，我有一个位于居中div的菜单。居中的div具有背景颜色。现在我想给左侧浏览器窗口边框和居中div之间的间隙另一种颜色而不是另一侧的间隙。我已经尝试了几种方法，如线性渐变或添加带有::之前的彩色框，但没有任何效果。 Here is a picture to visualize it

<style>
 .wrapper {
  width: 100%
 }

 .centered {
  margin: 0 auto
  max-width: 80em
  background-color: grey
 }
</style>

<div class="wrapper">
 <div class="centered">
  <nav>Some menu...</nav>
 </div>
</div>

Answer 1

您可以尝试使用linear-gradient上的突然.wrapper，例如：

background: linear-gradient(to right, red 5%, white 90%, gray 5%);

只需编辑颜色后的百分比即可获得尺寸。

在这里写了一个例子。简单而优雅。

http://jsbin.com/qivagowutu/edit?html,css,output

Answer 2

您可以使用此工具来制作正确的渐变： http://www.colorzilla.com/gradient-editor/

例如：

background: #ff3232;
background: -moz-linear-gradient(left, #ff3232 0%, #ff2828 49%, #bed4e5 50%, #bed4e5 100%);
background: -webkit-linear-gradient(left, #ff3232 0%,#ff2828 49%,#bed4e5 50%,#bed4e5 100%);
background: linear-gradient(to right, #ff3232 0%,#ff2828 49%,#bed4e5 50%,#bed4e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#bed4e5',GradientType=1 );

也许你已经尝试过正确的渐变，但是你应该改变style =＆＃34; wrapper＆＃34; to class =＆＃34; wrapper＆＃34;。

Answer 3

1）not＆＃39; style =＆＃34; wrapper＆＃34;＆＃39;但是＆＃39; class =＆＃34;包装＆＃39; 2）我建议给包装器背景颜色灰色和背景颜色居中白色：

<style>
 .wrapper {
  width: 100%;
  background: linear-gradient(to right, #ff0000 0%,#ff0000 50%,#808080 50%,#808080 100%);
 }

 .centered {
  margin: 0 auto;
  max-width: 80em;
  background-color: white;
 }
  </style>
</head>
<body>
<div class="wrapper">
 <div class="centered">
  <div>Some menu...</div>
 </div>
</div>

Answer 4

看看这个codepen

现在，在你的.centered里面你可以放任何你想要的东西，甚至你可以选择应该使用多少中心。

<style>
 .wrapper {
  display: flex;
  width: 100%;
  justify-content: center;
 }

 .centered {
  margin: 0;
  background-color: white;
  flex: 1; 
 }

 .left-red {
  margin: 0;
  background-color: red;
  width: 15%; 
 }
 .right {
  margin: 0;
  background-color: gray;
  width: 15%; 
 }
  </style>
</head>
<body>
<div class="wrapper">
 <div class="left-red">
 </div>
 <div class="centered">
  <div>Some menu...</div>
 </div>
 <div class="right">
 </div>
</div>

我已编辑添加左侧红色背景。

我强烈建议您阅读此great tutorial about flexbox。

如果您正在寻找它，请告诉我。

仅将背景颜色赋予居中div的一侧

4 个答案:

我强烈建议您阅读此great tutorial about flexbox。