0

私は HTML5 と CSS3 に不慣れで、私が取っている初心者の HTML5 クラスのプロジェクトに取り組んでいますが、私の問題に対する答えが見つかりません。ページのフッターに入れたいテキストを最適なフォーマットにする方法に行き詰まっています。最初の列がフッターの幅の約 2/3 で、2 番目の列が幅の約 1/3 である 2 つの列が必要です。

               This is the first line                       This is the first

これは foo の 2 行目のテストです これは 2 行目です

ある種の Div タグを使用する必要がありますか、それとも Aside を使用して 2 番目の列を作成できますか? それとも、テーブルを使用する必要がありますか? CSS でフッター ブロックを作成する方法は理解できたと思いますが、テキストを 2 つの異なるサイズの列にフォーマットする最善の方法がわかりません。私が得ることができるアドバイスは本当に感謝しています ありがとう!

4

4 に答える 4

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/ そして、この初期化ツールは、新しいプロジェクトを立ち上げてすぐに実行するのに適しています: 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 番目の列を作成できますか? それとも、テーブルを使用する必要がありますか?

2 つの列のコンテンツが関連している場合、または同じコンテキストの一部である場合は、レイアウトに div を使用します。asideタグを使用すると、意味的に正しくありません。このタイプのレイアウトのパーセンテージ div は、おそらく最良の解決策です。

...テキストを 2 つの異なるサイズの列にフォーマットする最善の方法がわかりません。

私はあなたがここで何を意味するのか正確に理解していないと思います。テキストは、それを含む要素 (div) で折り返されます。コンテンツに適切な階層を使用してください (h1/h2 タグの後に段落またはリストが続く、および/またはセクション/記事などの HTML5 タグ)。ただし、それは実際にはコンテンツによって異なります。スタイリングに関する限り、テキストの希望する部分を正確にスタイリングするために、いつでも css クラスを使用できます。(見出し、段落、リスト、スパンなど)

于 2013-07-23T18:17:54.313 に答える