私は CSS の初心者です。どうすればこのような効果を実現できますか? 長い間デバッグしていますが、まだ機能しません。アドバイスをお願いします。 _html/css

私は CSS の初心者です。どうすればこのような効果を実現できますか? 長い間デバッグしていますが、まだ機能しません。アドバイスをお願いします。 _html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:52:47

オリジナル

1053 人が閲覧しました

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

ログイン後にコピー