容器具有相同的不需要的宽度

Question

我有两个容器组成一个透明边框，其中有一个 45 度角。由于某种原因，第二个容器与第一个容器保持相同的 width/padding。我希望第二个容器维护它自己的 width/padding。本质上，每个容器水平填充 30 像素，但大小不同。

我做错了什么？这里有一个fiddle.....Click for fiddle

.home-img-text {
  position: absolute;
  left: 13%;
  top: 25%;
}
#home-img-text-container1,
#home-img-text-container2 {
  position: relative;
  margin-bottom: 20px;
  opacity: 1;
  transition: 1s;
  -webkit-transition: 1s;
  overflow: hidden;
}
#home-img-text-container1.fadeDisplay {
  opacity: 1;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
}
#home-img-text-container2.fadeDisplay {
  opacity: 1;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
}
#home-img-text-description,
#home-img-text-description2 {
  position: relative;
  margin: 30px 0px;
  padding: 30px 20px;
  color: #FFF;
  background: rgba(0, 0, 0, .8);
  font-size: 2.5em;
  line-height: 1.4em;
}
#home-img-text-description:before,
#home-img-text-description2:before {
  position: absolute;
  content: '';
  height: 30px;
  width: 100%;
  left: 0px;
  background: inherit;
}
/*#home-img-text-description2:before {
width: 80%;
}*/
#home-img-text-description:before,
#home-img-text-description2:before {
  top: -30px;
  transform: skewX(45deg);
  transform-origin: right bottom;
}
#home-img-text-description {
  font-family: 'open_sanslight';
}
#home-img-text-description2 {
  color: #efcd36;
  font-size: 1.8em;
}

<div class="home-img-text">
  <div id="home-img-text-container1">
    <div id="home-img-text-description">WRECKING <span class="block"></span>& DEMOLITION
      <br>DONE RIGHT.</div>
  </div>
  <div id="home-img-text-container2">
    <div id="home-img-text-description2">YOU NAME IT,
      <br>WE WRECK IT.</div>
  </div>
</div>

Answer 1

我认为您需要为第二个容器指定特定宽度，如下所示：

#home-img-text-description2 {
color: #efcd36;
font-size: 1.8em;
width:80%;
}

Answer 2

如果您希望每个容器仅占用一定的 width（固定宽度或适合内容所需的宽度），则有两种可能的解决方案。目前没有指定 width 并且它们是块级元素，因此它们会尽可能扩展。第一个容器有一个很长的文本，所以它扩展以适应内容（直到它不能进一步扩展的点）并且随着它，父级（#home-img-text）也扩展，因为它也没有任何固定宽度.由于两个容器都是同一个父容器的一部分，因此第二个容器也会扩展以占据父容器的整个宽度（因为它是一个块容器）。因此它们都得到相同的宽度。

其中之一是将 display: inline-block 分配给两个容器，如下面的代码片段所示。

.home-img-text {
  position: absolute;
  left: 13%;
  top: 25%;
}
#home-img-text-container1,
#home-img-text-container2 {
  position: relative;
  margin-bottom: 20px;
  opacity: 1;
  transition: 1s;
  -webkit-transition: 1s;
  overflow: hidden;
}
#home-img-text-container1.fadeDisplay {
  opacity: 1;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
}
#home-img-text-container2.fadeDisplay {
  opacity: 1;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
}
#home-img-text-description,
#home-img-text-description2 {
  position: relative;
  display: inline-block;
  margin: 30px 0px;
  padding: 30px 20px;
  color: #FFF;
  background: rgba(0, 0, 0, .8);
  font-size: 2.5em;
  line-height: 1.4em;
}
#home-img-text-description:before,
#home-img-text-description2:before {
  position: absolute;
  content: '';
  height: 30px;
  width: 100%;
  left: 0px;
  background: inherit;
}
#home-img-text-description:before,
#home-img-text-description2:before {
  top: -30px;
  transform: skewX(45deg);
  transform-origin: right bottom;
}
#home-img-text-description {
  font-family: 'open_sanslight';
}
#home-img-text-description2 {
  color: #efcd36;
  font-size: 1.8em;
}

<div class="home-img-text">
  <div id="home-img-text-container1">
    <div id="home-img-text-description">WRECKING <span class="block"></span>& DEMOLITION
      <br>DONE RIGHT.</div>
  </div>
  <div id="home-img-text-container2">
    <div id="home-img-text-description2">YOU NAME IT,
      <br>WE WRECK IT.</div>
  </div>
</div>

另一种方法是根据需要为它们分配明确的 width。

.home-img-text {
  position: absolute;
  left: 13%;
  top: 25%;
}
#home-img-text-container1,
#home-img-text-container2 {
  position: relative;
  margin-bottom: 20px;
  opacity: 1;
  transition: 1s;
  -webkit-transition: 1s;
  overflow: hidden;
}
#home-img-text-container1.fadeDisplay {
  opacity: 1;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
}
#home-img-text-container2.fadeDisplay {
  opacity: 1;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
}
#home-img-text-description,
#home-img-text-description2 {
  position: relative;
  margin: 30px 0px;
  padding: 30px 20px;
  color: #FFF;
  background: rgba(0, 0, 0, .8);
  font-size: 2.5em;
  line-height: 1.4em;
}
#home-img-text-description:before,
#home-img-text-description2:before {
  position: absolute;
  content: '';
  height: 30px;
  width: 100%;
  left: 0px;
  background: inherit;
}
#home-img-text-description:before,
#home-img-text-description2:before {
  top: -30px;
  transform: skewX(45deg);
  transform-origin: right bottom;
}
#home-img-text-description {
  font-family: 'open_sanslight';
}
#home-img-text-description2 {
  color: #efcd36;
  font-size: 1.8em;
}
#home-img-text-description {
  width: 300px;
}
#home-img-text-description2 {
  width: 200px;
}

<div class="home-img-text">
  <div id="home-img-text-container1">
    <div id="home-img-text-description">WRECKING <span class="block"></span>& DEMOLITION
      <br>DONE RIGHT.</div>
  </div>
  <div id="home-img-text-container2">
    <div id="home-img-text-description2">YOU NAME IT,
      <br>WE WRECK IT.</div>
  </div>
</div>

Answer 3

div 元素本质上是块元素。在大多数情况下，它们将占据可用宽度 space 除非设置明确的宽度或浮动。

要使这些元素的显示宽度与其包含的内容的长度成正比，请将它们声明为 inline-block

示例：

#home-img-text-description, #home-img-text-description2 {
    position: relative;
    margin: 30px 0px;
    padding: 30px 20px;
    color: #FFF;
    background: rgba(0,0,0,.8);
    font-size: 2.5em;
    line-height: 1.4em;
    box-sizing: border-box;
    display: inline-block;
}

容器具有相同的不需要的宽度

Containers have same undesired width

html

css

css-transforms

css-shapes