0

このページhttp://morriswebsitedesign.com/about.htmlのコンテンツテキストをナビゲーションリンクに合わせるにはどうすればよいですか?以前は絶対プロパティまたはテーブルを使用していましたが、現在はfloatの使用方法を理解しようとしています。

私はそれをこのように見せたい:A BBB

ここで、Aはナビゲーションで、Bはコンテンツです。

4

3 に答える 3

2

テキストとナビゲーションリンクが広すぎて、それらを含むに収まりませんdiv。それらを並べたい場合は、含まれているのサイズを大きくするdivか、テキストやナビゲーションリンクのサイズを小さくする必要があります。

たとえば、次のスタイルを使用すると、それらは私のコンピューター上で完全に整列します。

#content { width:700px; }

divミニチュアロゴとナビゲーションリンクをスタイルでラップする必要がありますfloat:left;float:left次に、ミニチュアロゴとを削除できますul

于 2012-07-26T02:11:24.840 に答える
2

まず、float:leftを#contentから削除します。これにより、#contentがメニューの右側に表示されます。

次に、テキストの一部をメニューの下に配置したくない場合は、overflow:hiddenを指定します。

#menu{float:left}
#content{overflow:hidden}

このようにして、コンテンツに幅を与える必要はありません。

それらの間にいくらかのスペースを作るために、あなたはあなたのメニューにマージン右とマージン下を与えることができます。

#menu{margin-right:20px; margin-bottom:20px}

私はあなたのcssであなたの'p'がマージントップを持っているのを見ます。そして、それはあなたのコンテンツのトップがあなたのメニューに整列されないようにします。css3を使用して、最初の要素の余白を削除できます。

#content p:nth-child(1){margin-top:0}

編集: #contentをロゴに合わせるには:

#logo2{width:200px; float:left}
#menu{width:200px; float:left; clear:left; margin-bottom:100px}
#content{display:inline}

まず、ロゴとメニューが列として機能する必要があります。両方を同じ幅にし、左にフロートさせる必要があります。左をクリアすると、メニューがロゴの下に移動します。
次に、#contentを選択して、float:leftを削除し、display:inlineを指定します。これにより、ブロックとして機能しなくなります。
メニューの下部の余白は、テキストがメニューの下に移動しないようにするためのものですが、メニューの高さを大きくしてみることができます。

于 2012-07-26T02:16:48.943 に答える
2

CSSでfloatを使用する場合、floatを追加するアイテムにも幅が必要です。

http://jsbin.com/azetuk/

しかし、フロートするときは、それらのフロートをクリアすることについて知る必要があります。ここに良い読み物があります:

http://css-tricks.com/the-how-and-why-of-clearing-floats/

コンテンツの横にもロゴが必要な場合は、メニューとロゴをdivでラップしてから、その要素をフロートさせます

http://jsbin.com/itaqok/

于 2012-07-26T02:20:42.193 に答える