Question

我有两个容器，组成一个45度角的透明边框。由于某种原因，第二个容器保持与第一个容器相同的宽度/填充。我希望第二个容器保持自己的宽度/填充。基本上，每个容器水平填充30px，但尺寸不同。

我做错了什么？这是一个小提琴.... Click for fiddle

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

如果您希望每个容器仅占用某个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 2

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

要使这些元素的显示宽度与其包含的内容长度成比例，请将它们声明为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; }

Answer 3

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

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

容器具有相同的不期望的宽度

3 个答案: