<!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 タグ
inline-table と同様: オブジェクトをインライン要素レベルでテーブルとして指定します。 HTML タグ
table-caption: と同様に、オブジェクトを表のタイトルとして指定します。 HTML タグ
table-cell: と同様に、オブジェクトを表のセルとして指定します。 HTML タグ
table-row: と同様に、オブジェクトをテーブル行として指定します。 HTML タグに似ています |
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 タグ
inline-table と同様: オブジェクトをインライン要素レベルでテーブルとして指定します。 HTML タグ
table-caption: と同様に、オブジェクトを表のタイトルとして指定します。 HTML タグ
table-cell: と同様に、オブジェクトを表のセルとして指定します。 HTML タグ
table-row: と同様に、オブジェクトをテーブル行として指定します。 HTML タグに似ています |
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 までご連絡ください。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTML、CSS、およびJavaScript：Web開発者に不可欠なツール
Apr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML：構造、CSS：スタイル、JavaScript：動作
Apr 18, 2025 am 12:09 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTMLの未来：ウェブデザインの進化とトレンド
Apr 17, 2025 am 12:12 AM
HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
HTML対CSS対JavaScript：比較概要
Apr 16, 2025 am 12:04 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。
HTML、CSS、およびJavaScriptの未来：Web開発動向
Apr 19, 2025 am 12:02 AM
HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。
See all articles
