Question

我正在编写我的第一个CSS行。我想将同一块的所有行对齐在一起，但我不知道如何做到这一点。这就是我想要做的事情：

enter image description here

使用常规HTML我会创建一个包含天数和2列的行的表。但是，由于CSS是关于将内容与表示分离，我认为这违反了CSS的原则。我认为所需的代码将具有以下形式：

<div>
<div>days</div><div>hours</div>
</div>

但我不确定CSS应该如何。我甚至不明白CSS定义了加载不同区域的确切位置。

谢谢

Answer 1

始终将表格用于表格结构化数据，以便可以使用css轻松设置样式。

当查看源代码时，表格也会更容易理解！

如果开发人员以后想要在行或列上创建条带行或悬停效果，该怎么办？所以使用表格并将所有样式部分留在CSS中处理。

这是您需要的典型html和CSS，请在jsfiddle

中查看

HTML

<table id="schedule">
    <tbody>
        <tr>
            <td>monday</td>
            <td>8am to 6pm</td>
        </tr>
        <tr>
            <td>tuesday</td>
            <td>8am to 6pm</td>
        </tr>
        <tr>
            <td>wednesday</td>
            <td>8am to 6pm</td>
        </tr>
        <tr>
            <td>thursday</td>
            <td>8am to 6pm</td>
        </tr>
        <tr>
            <td>friday</td>
            <td>8am to 6pm</td>
        </tr>
        <tr>
            <td>saturday</td>
            <td>8am to 6pm</td>
        </tr>
        <tr>
            <td>sunday</td>
            <td>closed</td>
        </tr>
    </tbody>
</table>

CSS

#schedule td:first-of-type
{
    text-transform: capitalize;
    text-align: left;
    padding-right: 10px;

}

#schedule td:last-of-type
{
    text-align: center;
    padding-left: 10px;
}

Answer 2

我创造了一个小提琴来解决你的问题。

以下是link to the fiddle

以下是HTML和CSS代码

<强> HTML

<div id="outer">

    <div class="push-left">Monday</div>
    <div class="push-right">8am to 6pm</div>

    <div class="clearfix"></div>

    <div class="push-left">Tuesday</div>
    <div class="push-right">8am to 6pm</div>

    <div class="clearfix"></div>

    <div class="push-left">Wednesday</div>
    <div class="push-right">8am to 6pm</div>

    <div class="clearfix"></div>

    <div class="push-left">Thursday</div>
    <div class="push-right">8am to 6pm</div>

    <div class="clearfix"></div>

</div>

<强> CSS

#outer{

    width:170px; //width of the container

}

.push-left{
    float:left; //pushes the element to the left
}

.push-right{
    float:right; //pushes the element to the right

}

.clearfix{
    clear:both; //clears any applied floats
}

希望这能解决你的问题！

Answer 3

尝试

dayshours

然后是CSS

 .holder{
     clear:both;
 }
 .test{
     width:200px;
 }

持有人将线条分开测试将定义200px或每个字段所需的宽度

要么使用表格，要么使用表格

CSS初学者 - 文本布局和格式

3 个答案: