100点、CSSレイアウト問題、サンプルコードあります、ぜひ見に来てください_html/css

<!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 タグ

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 タグ

table-cell: と同様に、オブジェクトを表のセルとして指定します。 HTML タグ
table-row: と同様に、オブジェクトをテーブル行として指定します。 HTML タグに似ています

inline-table と同様: オブジェクトをインライン要素レベルでテーブルとして指定します。 HTML タグ

table-caption: と同様に、オブジェクトを表のタイトルとして指定します。 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>

ログイン後にコピー

100点、CSSレイアウト問題、サンプルコードあります、ぜひ見に来てください_html/css_WEB-ITnose