Home >Web Front-end >HTML Tutorial >How to implement left column width adaptive design_html/css_WEB-ITnose
How to implement left column width adaptive design_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:20:31914browse
How to implement fixed right column width and adaptive left column width design
Reply to discussion (solution)
Here is a jquery to make a div with fixed width on the left and adaptive width on the right , if you want to fix the right side, just change the right side to the left side, which is a phase swap, http://www.ablanxue.com/prone_1761_1.html
I don’t understand jquery. Is there any way to use div css? Ah
Quoting the reply from JQJ007 on the 2nd floor: Quoting the reply from huanlin08 on the 1st floor: Here is a jquery that makes a div with a fixed width on the left and an adaptive width on the right. If you want the right to be fixed, just change the right to the left, that’s it Phase exchange, http://www.ablanxue.com/prone_1761_1.html
I can’t understand jquery. Is there any way to use div css?
Yes, look here: http://www .ab......
Changing the left column to the right does not achieve the desired effect. The right column cannot be fixed and the left column adapts.
Handsome guy, the avatar is very interesting.
I think what you may need is this:
http://bbs.blueidea.com/thread-2818595-1-1.html
1ec3b4620267d44c021f1cc6015e167916b28748ea4df4d9c2150843fecfba68
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>
1d29917cce9ff90f1fe20557d142945c16b28748ea4df4d9c2150843fecfba68
2599c84ca173ba4c479313ffa342183116b28748ea4df4d9c2150843fecfba68
.left{margin:0 250px 0 0 ;width:100%;}
.right{float:right;width:25px;}
This is enough.
8f9e4409b06fde1ff1d3a80f075ca0ed
0408d29daeaa1cd46a8559e55776064116b28748ea4df4d9c2150843fecfba68
15137067c16077086ba5fd5ad80f205116b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
.box{
position: relative;
}
.left{
margin-right: 200px;
background: yellow;
}
Position: Absolute;
Top: 0px;
Right: 0px;
Width: 200px;
Background: red;
} The background color is just for the effect
<div class="right"></div><div class="left"></div><style type="text/css">.left{background:#ff0;height:400px;}.right{float:right;width:250px;background:#f00;height:400px;} </style> Quoting the reply from stongyann on the 7th floor: 0408d29daeaa1cd46a8559e55776064116b28748ea4df4d9c2150843fecfba68
2599c84ca173ba4c479313ffa342183116b28748ea4df4d9c2150843fecfba68
.left{margin:0 250px 0 0 ;width:100%;}
.right{float:right;width:25px ;}
This is enough.
Two-column layout, one column has a fixed floating width, and the other column has an adaptive width. It's just a floating knowledge point.