このページhttp://morriswebsitedesign.com/about.htmlのコンテンツテキストをナビゲーションリンクに合わせるにはどうすればよいですか？以前は絶対プロパティまたはテーブルを使用していましたが、現在はfloatの使用方法を理解しようとしています。
私はそれをこのように見せたい：A BBB
ここで、Aはナビゲーションで、Bはコンテンツです。
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://css-tricks.com/the-how-and-why-of-clearing-floats/
コンテンツの横にもロゴが必要な場合は、メニューとロゴをdivでラップしてから、その要素をフロートさせます
于 2012-07-26T02:20:42.193 に答える