[英]How to make a absolute div adjust width to its content
我有一個絕對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%;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.