容器具有相同的不希望的宽度答案

【问题标题】：Containers have same undesired width容器具有相同的不希望的宽度
【发布时间】：2016-10-01 17:25:11
【问题描述】：

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

我做错了什么？这是一个小提琴......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>

【问题讨论】：

@Harry 这是新问题。
我无法理解@Becky 您面临的问题。如果padding 需要不同，则相应地更改padding 属性（并记住更改伪元素的height）或者如果width 需要不同，则设置所需的宽度。例如，请参阅this。我刚刚添加了一个width。
@Harry 我猜那不是填充。有些东西使第二个容器与第一个容器一样宽。
好的，所以您只希望第二个容器（或所有容器）尽可能宽，对吧？
是的，没错。然后不管填充是什么。

标签： html css css-shapes css-transforms

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

其中之一是将display: inline-block 分配给两个容器，如下面的 sn-p。

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

【讨论】：

感谢哈利，一如既往的出色回答！我不知道块元素会扩展以满足父级。你知道为什么 45 度变换在安卓互联网浏览器上不起作用吗？
不客气@Becky。关于 Android 浏览器上的转换，它应该按照 Can I Use website - 2D Transforms、3D Transforms 工作，但我没有 Android 操作系统，因此无法测试。您是否有机会使用较旧的浏览器版本？您可以尝试包括浏览器前缀吗？

【解决方案3】：

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

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

【讨论】：