ホームページ >ウェブフロントエンド >htmlチュートリアル >左列幅アダプティブデザインの実装方法_html/css_WEB-ITnose
左列幅アダプティブデザインの実装方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:20:31920ブラウズ
固定の右列幅と左列幅のアダプティブデザインを実装する方法
ディスカッションへの返信(解決策)
ここでは、左側が固定幅、右側がアダプティブ幅の div を作成するための JQuery を示します。右を修正するには、右を左に変更するだけです。問題ありません。入れ替えるだけです。 http://www.ablanxue.com/prone_1761_1.html
jquery を理解できません。div+css を使用する方法はありますか。 ?
2 階の JQJ007 からの返信を引用: 1 階の huanlin08 からの返信を引用: ここでは、左側が固定幅、右側が適応幅の div を作成する jQuery を示します。修正するには、右側を左側に変更するだけです。これは位相の交換です。 http://www.ablanxue.com/prone_1761_1.html
見えません jquery をご存知ですか? div+css を使用します
はい、こちらをご覧ください: http://www.ab...
左を右に変更しても、期待される効果は得られません。右の列は固定できず、左は適応的です
君のアバターはとても興味深いよ。
必要なものは次のとおりだと思います:
http://bbs.blueidea.com/thread-2818595-1-1.html
0408d29daeaa1cd46a8559e55776064116b28748ea4df4d9c2150843fecfba68
0408d29daeaa1cd46a8559e55776064116b28748ea4df4d9c2150843fecfba68
2599c84ca173ba4c479313ffa342183116b28748ea4df4d9c2150843fecfba68 .left{margin:0 250px 0 0 ;width:100%;}
。 right{float:right;width:25px;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title></head><body><div style="float:left; height:270px; border:1px solid #000; line-height:22px;">中国中国中国中国中国中国中国中国中国中国<br />中国中国中国中国中国中国中国中国中国中国</div><div style="float:left;width:115px; height:270px; border:1px solid #000;line-height:22px; overflow:hidden;">美国美国</div></body></html>
0408d29daeaa1cd46a8559e557760641
2599c84ca173ba4c479313ffa342183116b28748ea4df4d9c2150843fecfba68 {margin:0 250px 0 0 ;width:100%;}
.right{float:right;width:25px;}
これで十分です。
8f9e4409b06fde1ff1d3a80f075ca0ed
0408d29daeaa1cd46a8559e55776064116b28748ea4df4d9c2150843fecfba68
位置: 相対;
.left{
背景: 黄色;
.right{
上: 0px;
幅: 200px; ;
背景: 赤
}
背景色はエフェクト用です
7 階の stongyann からの引用:
0408d29daeaa1cd46a8559e55776064116b28748ea4df4d9c2150843fecfba68 div class= "right">16b28748ea4df4d9c2150843fecfba68
.left{margin:0 250px 0 0 ;width:100%;}
.right{float:right;width:25px;}
これで十分です。
2 列レイアウト。1 つの列には固定の変動幅があり、もう 1 つの列には % 適応幅があります。それは単なる浮遊知識ポイントです。