简体   繁体   中英

CSS: Not fixed text div Width

I'm working on a personal project and I'm having a design issue:

Say you have a div with this text: "Hello my name is Daniel..." and another div under that..

So the width should be the size that takes that phrase and element; not the size of the whole container.

This is my code in HTML:

<div id="feed">

        <div class="post">
            <div class="feed-msg">
                <p>My name is Daniel...</p>
                <div class="meta">5 hours ago.</div>
            </div>
        </div><!-- [End] .post -->
</div>

This is my code in CSS:

#feed {
 position: relative;
}

#feed .post {
min-height: 55px;
margin-left: 90px;
position: relative;
margin-bottom: 20px;
}

#feed .post div.feed-msg {
padding-left: 15px; padding-top: 9px; padding-bottom: 10px; padding-right: 15px;
}

Thanks.

Do you want this: http://jsfiddle.net/uhEBs/ ?

Use

#feed .post div.feed-msg {
    display:inline-block;
}

Moreover, you can join padding-left: 15px; padding-top: 9px; padding-bottom: 10px; padding-right: 15px padding-left: 15px; padding-top: 9px; padding-bottom: 10px; padding-right: 15px padding-left: 15px; padding-top: 9px; padding-bottom: 10px; padding-right: 15px into padding: 9px 15px 10px 15px

You placed your meta div within your msg div. You might get an easier time separating them and having the meta as part of the post div instead, then set up their respective width

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM