我有一个包含一些内容的绝对 div,如下所示:
HTML:
<div class="testimonials_carousel">
<div class="testimonials_carousel_item">
<div class="item_profile">
<img src="http://placehold.it/150x150"/>
</div>
<div class="item_story_container">
<div class="item_story">
<p> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
<p class="customer_name">- John Doe</p>
</div>
</div>
</div>
</div>
CSS:
.testimonials_carousel {
width: 100%;
margin: 0 auto;
border:1px solid black;
height:250px;
position:relative;
}
.testimonials_carousel_item {
opacity: 1;
position:absolute;
border: 1px solid blue;
display: flex;
left:0;
right:0;
top:20px;
margin: auto;
max-width:90%;
}
.item_profile {
width: 20%;
float:left;
border:1px solid red;
align-self: center;
display: inline-block;
vertical-align: middle;
}
.item_story_container {
max-width: 75%;
float: right;
border:1px solid yellow;
}
.item_story {
float: left;
background-color: #fff;
border-radius: 10px;
border: 1px solid #9c9c9c;
padding: 20px;
}
.item_story p {
font-size: 20px;
font-family: 'Open Sans', sans-serif;
}
.customer_name {
color: #de2b2b;
font-family: 'Shadows Into Light', cursive !important;
}
.item_profile img {
border-radius: 100%;
width: 80%;
border: 1px solid #9c9c9c;
margin: 0 auto;
display: block;
}
jsfiddle:http://jsfiddle.net/keb9qcan/
到目前为止一切看起来都很好。但是,如果我将“blah”的数量减少到 3,那么故事类的宽度就会变小。然后绝对父 div 仍然保持 90% 的宽度,使内容看起来不居中。
如何让 div 根据内容自动调整宽度?
我正在寻找使用 CSS/HTML 的解决方案。但如果这不可能,那么 jQuery 解决方案也可以。
我一直在进行大量的 SO QA。但无论我怎么做,我总是只得到一个 div(很多/更少的文本)按我的意愿工作。如果我用较少的文本得到它正确的,那么它看起来不正确与大量的文本。反之亦然。
如有任何帮助,我们将不胜感激。
编辑: 得到答案后,我觉得我也有必要说一下。类 .testimonials_carousel_item
需要是 positions:absolute
。因为我的布局和 jQuery 函数中的其他内容取决于此类是 position:absolute
。
最佳答案
请试试这个:
.testimonials_carousel_item {
opacity: 1;
position:fixed;
border: 1px solid blue;
display: flex;
left:0;
right:0;
top:20px;
margin: auto;
max-width:90%;
}
关于jquery - 如何使绝对div根据其内容调整宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32349494/