How to implement left column width adaptive design_html/css

How to implement left column width adaptive design_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:20:31

Original

913 people have browsed it

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

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

Copy after login

.left{margin:0 250px 0 0 ;width:100%;}
.right{float:right;width:25px;}
This is enough.

.box{
position: relative;
}
.left{
margin-right: 200px;
background: yellow;
} . Right {
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>

Copy after login

Quoting the reply from stongyann on the 7th floor:

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