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

您可以在每个div上使用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>而不是<div>，因为它们已经是内联元素：

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

如果您想坚持使用<div>：

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;
}

DEMO

http://jsfiddle.net/jkZeZ/

Answer 3

以下内容应达到您的要求：

.comment_name {
    display: inline-block;
}

.comment_time {
    display: inline-block;
}

.comment_body {
    display: inline-block;
}

在CSS中对齐Div

3 个答案:

修改