Question

您好我有一个简单的问题，使用html和CSS ...希望有人可以帮助我有一个“呃”的时刻。

我打算在左边有活动日期，在右边有活动信息，希望看到两列......而且我现在拥有的信息，信息包含在开头，与日期。我希望信息对齐。

我知道我可以通过div-float或使用表来轻松完成此操作，但我不想要其中任何一个。也许我使用了错误的元素..不确定。

提前致谢。

Answer 1

我建议使用相同金额的text-indent加margin-left：

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

JS Fiddle demo

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

Here's an alternative solution，使用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}

对齐一个段落

4 个答案: