0

我是 HTML5 和 CSS3 的新手，正在为我正在学习的 HTML5 初级课程做一个项目，但找不到我的问题的答案。我被困在如何最好地格式化我想放入页脚的文本。我需要两列，第一列大约是页脚宽度的 2/3，第二列大约是宽度的 1/3。

               This is the first line                       This is the first

这是对foo第二行的测试 这是第二行

我应该使用某种类型的 Div 标签，还是可以使用 Aside 制作第二列？或者，我应该使用一张桌子吗？我想我了解如何在 CSS 中制作页脚块，但不知道将文本格式化为两个不同大小的列的最佳方法。我能得到的任何建议都将不胜感激谢谢！

4

4 回答 4

1

使用 div 标签：

<style>
#left, #right{
    float: left;
}
#left {
    width: 66%;
}
#right {
    width: 33%;
}
</style>
<div id="left">
    <p>Left Content</p>
</div>
<div id="right">
    <p>Right Content</p>
</div>
<div style="clear: both;"></div><!--Clears the float-->
于 2013-07-23T17:52:57.760 回答
0

上面发布的答案您可以使用，但因为我已经这样做了，所以这里是相同的方法，所以我希望它对您有所帮助：

<div id="container">
    <div id="left-col">This is a column</div>
    <div id="right-col">This is a column</div>
    <div style="clear: both"></div>
</div>

CSS：

#container{ width: 600px; margin-right: auto; margin-left: auto; border: solid 1px red; padding: 1px; }
#left-col{ float: left; width: 66%; border: solid 1px blue; }
#right-col{ float: right; width: 33%; border: solid 1px green; }

http://jsfiddle.net/uKrsM/我添加了边框来显示宽度

于 2013-07-23T17:58:32.440 回答
0

使用百分比宽度可能是最简单的方法，尽管我建议您查看 Bootstrap 或类似的布局框架。

这是引导程序：http: //twitter.github.io/bootstrap/ 这个 initializr 工具非常适合快速启动和运行新项目：http: //www.initializr.com/

为了了解它是如何工作的 - 尝试使用如下所示的百分比宽度示例：

http://jsfiddle.net/tsdexter/nnfLD/1/

HTML：

<body>
<header><h1>This is a header</h1></header>
<section id="content">This is some content</section>
<footer>
    <div class="twothirds">
        This is two thirds
    </div>
    <div class="onethird">
        This is one third
    </div>
    <div class="clear-fix"></div>
</footer>
</body>

CSS：

div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.twothirds {
    width: 64.66666%;
    margin-right: 2%;
    float: left;
    background: #ccc;
}
.onethird {
    width: 33.33333%;
    float: left;
    background: #ccc;
}
.clear-fix {clear: both;}
于 2013-07-23T17:58:32.787 回答
0

我应该使用某种类型的 Div 标签，还是可以使用 Aside 制作第二列？或者，我应该使用一张桌子吗？

如果 2 列的内容是相关的或属于同一上下文的一部分，则使用 div 进行布局。使用搁置标签在语义上是不正确的。这种布局的百分比 div 可能是最好的解决方案

...不知道将文本格式化为两个不同大小的列的最佳方法。

我不认为我完全理解你在这里的意思。文本将自身包裹在其包含元素（div）中。为您的内容使用适当的层次结构——h1/h2 标记后跟段落或列表，和/或 HTML5 标记，例如部分/文章——但这实际上取决于您的内容。就样式而言，您始终可以使用 css 类来精确地设置您想要的文本部分的样式。（标题、段落或列表或跨度...等）

于 2013-07-23T18:17:54.313 回答