如何使CSS元素的宽度大于其父元素

Question

我试图找出如何使元素的宽度N％大于其父级（或视点的特定百分比）。

到目前为止，我从答案中找到了以下代码段https://stackoverflow.com/a/24895631/54929但是，无论我如何将值修改为calc( )，我都无法弄明白如何获得答案。一个元素比它的父元素大25％（或窗口宽度的75％）等，并使它居中。

＆＃13;

＆＃13;

body,
html,
.parent {
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}
.parent {
    width: 50%;
    max-width: 800px;
    background: grey;
    margin: 0 auto;
    position: relative;
}
.child-element {
    position: relative;
    width: 100vw;
    left: calc(-50vw + 50%);
    height: 50px;
    background: blue;
}

＆＃13;

<div class='parent'>
    parent element
    <div class='child-element'>child-element</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

calc( )与此无关。如果要使元素大于其父元素的特定百分比，则只需将该百分比添加到100％即可。例如，如果你想要它增加50％，那么给它宽度为150％。

如果你想将它居中，那么给它一个负left等于百分之一的一半，在上面的例子中为-25％。

＆＃13;

＆＃13;

body,
html,
.parent {
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}
.parent {
    width: 50%;
    max-width: 800px;
    background: grey;
    margin: 0 auto;
    position: relative;
}
.child-element {
    position: relative;
    width: 150%;
    left: -25%;
    height: 50px;
    background: blue;
}

＆＃13;

<div class='parent'>
    parent element
    <div class='child-element'>child-element</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用此CSS：

.child-element {
    position: relative;
    width: 125%;
    left: -12.5%;
    height: 50px;
    background: blue;
}

width被定义为百分比（如您所愿），left值（以百分比表示）只是width减半的一半（125％ - 100％） ）/ 2 = 12.5％。

body,
html,
.parent {
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}
.parent {
    width: 50%;
    max-width: 800px;
    background: grey;
    margin: 0 auto;
    position: relative;
}
.child-element {
    position: relative;
    width: 120%;
    left: -10%;
    height: 50px;
    background: blue;
}

<div class='parent'>
    parent element
    <div class='child-element'>child-element</div>
</div>

Answer 3

宽度比其父级宽两倍（且也居中）的子级示例：

 .child-element {
   position: relative;
   width: 200%;
   left:-50%;
   height: 50px;
   background: blue;
 }

Answer 4

为了使子元素比其父元素大25％，我将其宽度设置为125％并将其向左移动12.5％（25％的一半）。

＆＃13;

＆＃13;

body,
html,
.parent {
  height: 100%;
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
}

.parent {
  width: 50%;
  max-width: 800px;
  background: grey;
  margin: 0 auto;
}

.child-element {
  position: relative;
  width: 125%;
  left:-12.5%;
  height: 50px;
  background: blue;
}

＆＃13;

<div class='parent'>
  parent element
  <div class='child-element'>child-element</div>
</div>

＆＃13;

＆＃13;

＆＃13;

要使子元素占视口的75％，我将其宽度设置为75vw并将其左边缘设置为12.5vw（剩余25vw的一半）。

＆＃13;

＆＃13;

body,
html,
.parent {
  height: 100%;
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
}

.parent {
  width: 50%;
  max-width: 800px;
  background: grey;
  margin: 0 auto;
}

.child-element {
  position: absolute;
  width: 75vw;
  left: 12.5vw;
  height: 50px;
  background: blue;
}

＆＃13;

<div class='parent'>
  parent element
  <div class='child-element'>child-element</div>
</div>

＆＃13;

＆＃13;

＆＃13;