3

嗨，我有一个使用 html 和 css 的简单问题......希望有人可以帮助我度过一个“duh”的时刻。

这是jsfiddle。

我计划在左边有活动日期，在右边有活动信息，想要一个两列的外观......而且我现在拥有的信息会从头开始，与日期保持一致。我希望信息对齐。

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

提前致谢。

4

4 回答 4

2

我建议一个负数text-indent加上一个margin-left相同数量的：

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

JS 小提琴演示。

于 2012-05-31T19:04:16.800 回答
1

在你的小提琴中试试这个 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;
}
于 2012-05-31T19:15:14.017 回答
1

这是一个替代解决方案，使用 a 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 */
于 2012-05-31T19:16:46.083 回答
1 
#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}
于 2012-05-31T19:37:30.410 回答