Question

我正在从事个人项目，我遇到了设计问题：

假设你有一个div有这个文字：“你好我的名字是丹尼尔...”和另一个div下...

所以宽度应该是采用该短语和元素的大小;不是整个容器的大小。

这是我在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>

这是我在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;
}

感谢。

Answer 1

你想要这个：http://jsfiddle.net/uhEBs/？

使用

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

此外，您可以将padding-left: 15px; padding-top: 9px; padding-bottom: 10px; padding-right: 15px加入padding: 9px 15px 10px 15px

Answer 2

您将meta div放在msg div中。您可以更容易地分离它们并将元素作为post div的一部分，然后设置它们各自的宽度

CSS：不固定文本div宽度

2 个答案: