如何对其内容进行绝对div调整宽度

时间:2015-09-02 09:29:57

标签: jquery html css absolute

我有一个带有一些内容的绝对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

1 个答案:

答案 0 :(得分:1)

请尝试这个:

DEMO

.testimonials_carousel_item {
    opacity: 1;
    position:fixed;
    border: 1px solid blue;
    display: flex;
    left:0;
    right:0;
    top:20px;
    margin: auto;
    max-width:90%;
}