问题
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>回答1:
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>回答2:
div elements are inherently block elements. In most occasions they will take up the width of the available space unless set with an explicit width or floated.
To have these elements display in a width proportional to the length of content it contains, declare them as inline-block
Example:
#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;
}
回答3:
I think you need to give specific width to second container like below:
#home-img-text-description2 {
color: #efcd36;
font-size: 1.8em;
width:80%;
}
来源：https://stackoverflow.com/questions/37583981/containers-have-same-undesired-width