ホームページ >ウェブフロントエンド >htmlチュートリアル >100点、CSSレイアウト問題、サンプルコードあります、ぜひ見に来てください_html/css_WEB-ITnose
100点、CSSレイアウト問題、サンプルコードあります、ぜひ見に来てください_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:51:561069ブラウズ
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <style type="text/css">.divquery{ background: blue; float:left;}.qitem { display:inline-block; line-height:30px; text-align:right; width:250px; height:25px; overflow:hidden; background: green;}.divbtn{ float:left; width:120px; background: red; height:25px; right:10px; }</style></head><body> <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></body></html> 1. 赤の div と青の div が並べられ、ページの幅が変更されると、赤の div の幅は固定され、青の div の幅は適応されます。
2. 緑のdivの幅は固定です。幅が足りない場合は、緑のdivの高さが変わり、赤のdivの高さが必要になります。 div もそれに応じて変更します
現状では、赤の div が青の下に配置されることが多く、赤の div の高さは変化しません:
を投稿しました。午後に投稿して、ざっと試してみたら問題なかったので投稿しましたが、夜によく見てみたら、まだ問題があることが判明したので、別のスレッドを開いて質問しました。
ディスカッションへの返信 (解決策)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <style type="text/css"> .content{ width:100%; margin-right:120px; display: table; } .divquery{ background: blue; display: table-cell; vertical-align: top; } .qitem{ display:inline-block; line-height:30px; text-align:right; width:250px; height:25px; overflow:hidden; background: green; } .divbtn{ width:120px; background: red; display: table-cell; vertical-align: top; } </style> </head> <body> <div class="content"> <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> 2 階の正解、表示レイアウト モード table: オブジェクトを指定 ブロック要素レベルのテーブルとして。 HTML タグ f5d188ed2c074f8b944552db028f98a1
inline-table と同様: オブジェクトをインライン要素レベルでテーブルとして指定します。 HTML タグ f5d188ed2c074f8b944552db028f98a1
table-caption: と同様に、オブジェクトを表のタイトルとして指定します。 HTML タグ 63bd76834ec05ac1f4c0ebbeaafb0994
table-cell: と同様に、オブジェクトを表のセルとして指定します。 HTML タグ b6c5a531a458a2e790c1fd6421739d1c
table-row: と同様に、オブジェクトをテーブル行として指定します。 HTML タグに似ていますa34de1251f0d9fe1e645927f19a896e8
http://css.doyoe.com/
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <style type="text/css"> .content{ width:100%; margin-right:120px; display: table; } .divquery{ background: blue; display: table-cell; vertical-align: top; } .qitem{ display:inline-block; line-height:30px; text-align:right; width:250px; height:25px; overflow:hidden; background: green; } .divbtn{ width:120px; background: red; display: table-cell; vertical-align: top; } </style> </head> <body> <div class="content"> <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> 2 Lou Zheng の答えは、表示レイアウト メソッド
table: オブジェクトをブロック要素レベルでテーブルとして指定します。 HTML タグ f5d188ed2c074f8b944552db028f98a1
inline-table と同様: オブジェクトをインライン要素レベルでテーブルとして指定します。 HTML タグ f5d188ed2c074f8b944552db028f98a1
table-caption: と同様に、オブジェクトを表のタイトルとして指定します。 HTML タグ 63bd76834ec05ac1f4c0ebbeaafb0994
table-cell: と同様に、オブジェクトを表のセルとして指定します。 HTML タグ b6c5a531a458a2e790c1fd6421739d1c
table-row: と同様に、オブジェクトをテーブル行として指定します。 HTML タグに似ていますa34de1251f0d9fe1e645927f19a896e8
http://css.doyoe.com/
ありがとうございます。テストしてみたところ、他の要件はすべて満たされていましたが、1 つだけ例外がありました。ブラウザの境界線が引かれると、青い div が自動的に折り返されますが、折り返すとその横に大きな空白が表示されます。どうすれば置き換えることができますか。この空白を削除しますか？
どのように削除しますか?赤に変更しますか？白に変える？
パーセンテージに加えて、rem を使用するものもあります。 。行って見ることができます。 .qitem 子のサイズを固定する必要がある場合は、実際の状況と子がラップされるときのサイズに応じて @media を設定できます。 。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <style type="text/css"> .content{ width:100%; margin-right:120px; display: table; } .divquery{ background: blue; display: table-cell; vertical-align: top; } .qitem{ display:block; float:left; line-height:30px; text-align:right; margin:10px 1%; height:25px; overflow:hidden; background: green; } @media (max-width: 399px){ .qitem{width:98%;} } @media (min-width: 400px) and (max-width: 767px){ .qitem{width:48%;} } @media (min-width: 768px) and (max-width: 1199px){ .qitem{width:31.33%;} } @media (min-width: 1200px){ .qitem{width:23%;} } .divbtn{ width:120px; background: red; display: table-cell; vertical-align: top; } </style> </head> <body> <div class="content"> <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>
どのように削除しますか?赤に変更しますか？白に変える？
色を変更する代わりに、この余分な段落を削除します。自動行折り返し後、このような余分な段落が存在するため、クエリ ボタンがクエリ項目から遠く離れているように見えます
どのように削除しますか?赤に変更しますか？白に変える？
色を変更する代わりに、この余分な段落を削除します。自動行折り返し後、このような余分な段落が存在するため、クエリ ボタンがクエリ項目から遠く離れているように見えます
ただ聞きたいのですが、そこに行く方法、色を変更しますか？赤い部分が長くなりますか？青い部分が短くなりますか？削除する方法があるはずです~
どうやって削除しますか?赤に変更しますか？白に変える？
色を変更する代わりに、この余分な段落を削除します。自動行折り返し後、このような余分な段落が存在するため、クエリ ボタンがクエリ項目から遠く離れているように見えます
ただ聞きたいのですが、そこに行く方法、色を変更しますか？赤い部分が長くなりますか？青い部分が短くなりますか？削除する方法があるはずです~
青い部分が短くなります
アイデアを提供します。jsを使用するか、応答性を使用して青いブロックの幅を制御します。青いブロックの幅が常に緑の幅の整数倍であることを確認してください。
アイデアを教えてください。js または応答性を使用して、青いブロックの幅が常に緑の幅の整数倍になるようにしてください。
ありがとう、これは以前にそれを制御するコードを書いたことがありますが、今遭遇した問題は、私のコードを事前に自動的に折り返す可能性があることです。彼をコントロールしてキャリアを変えることができたのに、彼は自分でキャリアを変えたのです。 。 。 。私は今困っています
<!DOCTYPE html><html><head> <title>demo</title> <meta charset="utf-8"> <script type="text/javascript" src="http://seventh77.com/view/publicjs/jquery-2.1.4.min.js"></script> <style type="text/css"> .blue{ width: 550px; float: left; background-color: blue; } .green{ width: 100px; height: 50px; margin: 1px 5px; float: left; background-color: green; } .red{ width: 150px; height: 50px; float: left; background-color: red; } </style></head><body> <div class="blue"> <div class="green">查询项目</div> <div class="green">查询项目</div> <div class="green">查询项目</div> <div class="green">查询项目</div> <div class="green">查询项目</div></div><div class="red">查询</div><script> window.onresize = function () { var width = $(window).width(); if(width >1000){ $(".blue").width(550); } else if( width < 1000 && width >= 800){ $(".blue").width(440); } else if(width < 800 && width >= 600){ $(".blue").width(330); } else if(width < 600 && width >= 400){ $(".blue").width(220); } else if(width < 400 && width >= 200){ $(".blue").width(110); } $(".red").height($(".blue").height()); }</script> </body></html>声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。