容器具有相同的不期望的宽度 [英] Containers have same undesired width
本文介绍了容器具有相同的不期望的宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个容器，组成一个透明的边框，有45度的角度。由于某种原因，第二容器保持与第一容器相同的宽度/填充。我想让第二个容器维持自己的宽度/填充。基本上，每个容器水平放置30像素，但尺寸不一样。
我做错了什么？这是一个小提琴.... 点击小提琴
.home-img-text {position：absolute;左：13％; top：25％;}＃home-img-text-container1，＃home-img-text-container2 {position：relative; margin-bottom：20px;不透明度：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;颜色：#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： -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>完成正确。< / 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 （固定宽度或其内容所需的宽度），则有两种可能的解决方案）。目前没有指定 width ，它们是块级元素，因此它们尽可能扩展。第一个容器有一个冗长的文本，所以它扩展到适合的内容（直到它不能进一步扩展的点），并与它，父（＃home-img-text ）也扩展，因为它也没有任何固定的宽度。由于两个容器都是同一个父容器的一部分，所以第二个容器也扩展为占用父容器的全部宽度（因为它是一个块容器）。
其中一个将分配 display：inline-block
.home-img-text {position ：绝对左：13％; top：25％;}＃home-img-text-container1，＃home-img-text-container2 {position：relative; margin-bottom：20px;不透明度：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;颜色：#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>完成正确。< / 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 。
div class =snippetdata-lang =jsdata-hide =truedata-console =true>
.home-img-text {position：absolute;左：13％; top：25％;}＃home-img-text-container1，＃home-img-text-container2 {position：relative; margin-bottom：20px;不透明度：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;颜色：#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>完成正确。< / div> < / div> < div id =home-img-text-container2> < div id =home-img-text-description2> YOU NAME IT，< br> WE WRECK IT。< / div& < / div>< / div>
I have two containers that make up a transparent border that has a 45 degree angle in it. For some reason the second container maintains the same width/padding as the first container. I want the second container to maintain its own width/padding. Essentially, 30px of padding horizontally to each container, but not the same size.
What am I doing wrong? Here is a 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>
解决方案
There are two possible solutions if you want each container to take up only a certain width (either a fixed width or the width it requires to fit contents). Currently there is no width specified and they are block level elements, so they expand as much as possible. The first container has a lengthy text and so it expands to fit the content (until the point where it cannot extend further) and along with it, parent (#home-img-text) also expands since that doesn't have any fixed width either. Since both containers are part of the same parent, the second container also expands to occupy the full width of the parent (as it is a block container). Thus both of them are getting the same width.
One of them would be to assign display: inline-block to the two containers like in below snippet.
.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>
The other would be to assign them an explicit width as required.
.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>
这篇关于容器具有相同的不期望的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
