0

私は調整しようとしていますが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
4

3 に答える 3

2

float: leftすべての div とclear: left;最初のdiv に使用できます。

デモ: http://jsfiddle.net/9mfR8/

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

.comment_name{    
   clear: left;
}

またはdisplay: inline-block;、3 つの div を使用してそれらをコンテナー div で囲むことができます (これはdisplay: blockデフォルトであり、「改行」を強制します)。

于 2013-02-26T14:28:18.783 に答える
2

個人的には、すでにインライン要素であるため<span>、 s の代わりにs を使用すると思います。<div>

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

s の使用に固執する<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;
}

デモ

http://jsfiddle.net/jkZeZ/

于 2013-02-26T14:29:09.270 に答える
0

以下は、必要なものを達成する必要があります。

.comment_name {
    display: inline-block;
}

.comment_time {
    display: inline-block;
}

.comment_body {
    display: inline-block;
}
于 2013-02-26T14:28:16.837 に答える