html - 段落を揃える

Question

こんにちは、html と css を使用して簡単な質問があります。

ここにjsfiddleがあります。

左側にイベントの日付、右側にイベント情報を配置する予定で、2 列の外観が必要です...そして、現在私が持っているものでは、情報は最初に折り返され、日付に合わせられます。情報を整理したい。

div-float またはテーブルを使用してこれを簡単に達成できることはわかっていますが、どちらも必要ありません。多分私は間違った要素を使用しています..よくわかりません。

前もって感謝します。

Answer 1

私は同じ量のとtext-indent結合された負をお勧めします:margin-left

#container p {
    text-indent: -4em;
    margin-left: 4em;
}

JS フィドルのデモ。

Answer 2

あなたのフィドルでこのCSSを試してください：

#container {
    width: 270px;
    background: #e9cfa7;
}
#container p:not(span) { padding-left: 70px }
#container p span {
    background-color: #5d396e;
    float: left;
    display: block;
    width: auto;
    margin-left: -70px;
}

Answer 3

を使用した代替ソリューションを次に示しますが、スタイルに含まれてdlいることを前提としています。.clearfix

HTML:

<dl id="container" class="clearfix">
    <dt>05/31/12</dt>
    <dd>The first event looks like this. It has to wrap around.</dd>
    <dt>06/01/12</dt>
    <dd>The second event looks like this. It has to wrap around too.</dd>
    <dt>06/01/12</dt>
    <dd>Thesecondeventlookslikethis.Ithastowraparoundtoo.</dd> 
</dl>

CSS:

dl#container{
    width:270px;
    background-color:#e9cfa7;
}

dt{
    clear:left;
    float:left;
    width:25%; 
    margin-right:2%;
    background-color:#5d396e;
}

dd{
    width:70%;
    float:left;
    display:inline-block;
    word-wrap:break-word;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */

Answer 4

#container p {position: relative; padding: 0 4px 4px 80px;}

#container p span {background-color: #5d396e; color: #FFF;  display:block; width: 60px;position: absolute; left: 4px; top: 4px; padding: 4px}