0

私が設計している電子タバコのサイトには、次のようなものがあります。

<div id="top">
    //code
</div>
<div id="nav">
    //code
</div>
<div id="container">
    //code
</div>
<div id="bottom">
    //code
</div>

<div>コンテンツ自体ではなく、タグによって領域が定義されるように構成したいと考えています。厳密に言えば、特定の<div>要素内のものは次のように整理する必要があります。

分割列

私は次のようなことを試しましたがfloat、見た目が非常に醜く、テキストが適切に折り返されません。私の最初の推測は csscolumnプロパティを使用することでしたが、ページが 2 つの部分に分割され、下部要素と上部<div>要素がどちらか一方の上に配置されますが、両方には配置されません。

これが些細な作業である場合は申し訳ありませんが、私はかなり優れたロジック プログラマーですが、css は私の最強のスーツではなく、一般的に暗記メモリや関数ではなく、試行錯誤を通じて考案するものです。

一般的な間隔 (つまり、要素の幅<div>) は私が達成できるものですが、物事を配置するだけで途方に暮れています。

HTMLは次のとおりです。

http://pastebin.com/xbSypPcn

CSSは次のとおりです。

http://pastebin.com/mZnBHPP0

これがどのように見えるかのイメージです：

http://imageshack.us/a/img706/5117/uzbn.png

これは、私がどのように見せたいかのイメージです:

http://imageshack.us/a/img571/9219/uxm1.png

非常に見苦しいサイトですみません。提供する前に .css を削除して、見た目を良くしたいと思います。

4

1 に答える 1

1

スタイルタスクを達成するには、次のようなものを使用する必要があります。

#top {
display: block;
height: 200px;
}
#left {
display: block;
width: 300px;
height: 500px;
float: left;
}
#right {
display: block;
width: 700px;
height: 500px;
float: right;
}
#bottom {
display: block;
height: 200px;
}

display: ブロックを適切なフロートと高さと幅の設定と組み合わせるとうまくいくはずです。私はこれをテストしていませんが、コンセプトは正しい方向に進むのに役立つはずです.

さらに、フロートがこれをスローしている場合は、div タグをネストして目的のテキスト効果を得ることができます。

例: 次のような HTML が必要な場合があります。

<div id="right">
<div id="right_content">
Your text here
</div>
</div>

編集/追加: 画像付きのコード HTML と CSS を追加していただきありがとうございます。「リキッド レイアウト」 % 対 px 値を使用しているため、まだパディングに px を使用しています。#contianer および #nav css スタイルからパディング値をすべて取り除いたのではないかと思います。あなたは今とても近くにいるようです。ナビゲーションとコンテナを少しトリミングして、期待どおりに見えるようにするだけです。

ブラウザとして FF を使用している場合は、ドキュメントを「検査」するために使用できる Firebug という優れたツールがあります。あなたが指しているものが何であれ、htmlと対応するHTMLが表示されます。このツールは、何度も「私の命を救ってくれました」。

于 2013-10-18T00:30:32.403 に答える