asp.net - 在css中对齐div

Question

我正在努力调整div并使用我所有的努力float并margins没有带来我想要的东西。所以我认为这是正确的地方

基本上循环以下内容Foreach：

<div class="comment_name">@Html.displayName</div>
<div class="comment_time">@Html.formattedDateTime(item.dTime.Value)</div>
<div class="comment_body">@item.displayComments</div> 

并尝试显示如下文本：

Dispaly Name , 11 Feb 2013: User entered comment. 

应该是什么CSS让它工作？

跨度回答后更新

跨度工作。但是如果评论的长度很长，我会遇到问题。越来越像下面

Dispaly Name , 11 Feb 2013:The example will show you how to implement a read-only grid. This article tries to answer the following question

但应该是

Dispaly Name , 11 Feb 2013:The example will show you how to implement a read-only grid.
                            this article tries to answer the following question

Answer 1

您可以float: left在每个 div 和clear: left;第一个上使用；

演示：http: //jsfiddle.net/9mfR8/

div {
    border: 1px solid red;
    float: left;
}

.comment_name{    
   clear: left;
}

或者您可以使用display: inline-block;三个 div 并将它们包含在一个容器 div 中（display: block默认情况下会强制使用“新行”），

Answer 2

我个人会说使​​用<span>s 而不是<div>s 因为它们已经是内联元素：

<span>@Html.displayName</span>
<span>@Html.formattedDateTime(item.dTime.Value)</span>
<span>@item.displayComments</span>

如果你想坚持<div>s 使用：

display: inline;

或者如果单个容器具有例如固定宽度：

display: inline-block;

---

编辑

要在更新后的问题中获得结果，您可以使用以下命令：

HTML

<span>Dispaly Name,</span>
<span>11 Feb 2013:</span>
<span> The example will show you how to implement a read-only grid. This article tries to answer the following question.
</span>

CSS

span {
    vertical-align: top;
}

span:last-child {
    display: inline-block;
    width: 400px;
}

演示

http://jsfiddle.net/jkZeZ/

Answer 3

以下应该达到您的要求：

.comment_name {
    display: inline-block;
}

.comment_time {
    display: inline-block;
}

.comment_body {
    display: inline-block;
}