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

Question

我正在编写我的第一个 CSS 行。我想将同一块的所有行对齐在一起，但我不知道该怎么做。这就是我想要做的：

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

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

但我不确定 CSS 应该是什么样子。我什至不明白 CSS 定义了加载不同区域的确切位置。

谢谢

Answer 1

始终将 table 用于 table 结构化数据，以便可以使用 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

我创建了一个可以解决您的问题的小提琴。

这是小提琴的链接

下面是 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

尝试

天时

然后是 CSS

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

支架将保持线条分开并且测试将定义 200px 或您想要的每个字段的宽度

要么使用表格