ホームページ >ウェブフロントエンド >htmlチュートリアル >私は CSS の初心者です。どうすればこのような効果を実現できますか? 長い間デバッグしていますが、まだ機能しません。アドバイスをお願いします。 _html/css_WEB-ITnose
私は CSS の初心者です。どうすればこのような効果を実現できますか? 長い間デバッグしていますが、まだ機能しません。アドバイスをお願いします。 _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:52:471064ブラウズ
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <style type="text/css">.divtop{ padding: 10px; background: black;}.divquery{ background: blue; height:200px; float:left;}.divbtn{ float:left; width:120px; background: red; height:200px;}.qitem { display:inline-block; line-height:30px; text-align:right; width:250px; height:25px; overflow:hidden; background: green;}</style></head><body> <div class="divtop"> <div class="divquery"> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> </div> <div class="divbtn"> </div> </div></body></html> 実現したい効果は、
1. ページの幅が変更されると、赤の div と青の div が並べられます。青の div の幅は固定です。
2. 緑の div の幅は固定されています。幅が足りない場合は、緑の div を新しい行に配置できます。これで問題ありません。 >
現在の状況は、写真に示すように、私がよく実行する赤い div が青い色の下にあることです:
調整方法を教えてください。また、黒の div はなぜ少ししか表示されないのですか?青と赤の両方をカバーする必要はないでしょうか?最上位の div ですか?
ディスカッションへの返信 (解決策)
red div float:right
Red div float:right
いいえ、右に変更します。まだ下にありますが、右になるだけです
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <style type="text/css">.divtop{ padding: 10px; background: black;}.divquery{ background: blue; height:200px; float:left; width:80%}.divbtn{ float:left; width:20%; background: red; height:200px;}.qitem { display:block; line-height:30px; text-align:right; width:15%; float:left; height:25px; overflow:hidden; background: green; margin:0.4rem;}</style></head><body> <div class="divtop"> <div class="divquery"> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> </div> <div class="divbtn"> </div> </div></body></html> 幅を定義します
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <style type="text/css">.divtop{ padding: 10px; background: black;}.divquery{ background: blue; height:200px; float:left; width:80%}.divbtn{ float:left; width:20%; background: red; height:200px;}.qitem { display:block; line-height:30px; text-align:right; width:15%; float:left; height:25px; overflow:hidden; background: green; margin:0.4rem;}</style></head><body> <div class="divtop"> <div class="divquery"> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> </div> <div class="divbtn"> </div> </div></body></html> 幅を定義します
ありがとうございます!ただし、divquery の幅は定義したくありません。divbtn の幅をすでに設定しているため、divquery の幅が残りの部分になります。幅を指定したり、パーセンテージを使用すると、空白部分が発生する可能性があります。ページのステッチが結合されることを願っています
ポイントをください。 。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <style type="text/css">.divtop{ padding: 10px; padding-right:130px; background: black; overflow:hidden; position:relative;}.divquery{ background: blue; height:200px; float:left;}.divbtn{ float:left; width:120px; background: red; height:200px; right:10px; position:absolute;}.qitem { display:inline-block; line-height:30px; text-align:right; width:250px; height:25px; overflow:hidden; background: green;} </style> </head><body> <div class="divtop"> <div class="divquery"> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> </div> <div class="divbtn"> </div> </div> </body></html>声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。