Home >Web Front-end >HTML Tutorial >CSS layout: fixed width on the left, adaptive on the right_html/css_WEB-ITnose
CSS layout: fixed width on the left, adaptive on the right_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:45:58929browse
Fixed width on the left, adaptive on the right
There are many ways to achieve
Reduce the window Give it a try?
Option 1:
Float on the left and add a margin-left on the right
View demo
<!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 charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽，右侧自适应(1)</title><style type="text/css"> *{margin: 0;padding: 0;} .left{ float: left; width: 200px; border: 1px solid #333; background: #aaa; } .right{ margin-left:200px; border: 1px solid #333; background: #ccc; word-break: break-all; }</style></head><body> <div class="left"> <h4>left</h4> <p>oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000</p> </div> <div class="right"> <h4>right</h4> <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888 BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888</p> </div></body></html> Option 2:
Left floating on the left, overflow on the right: hidden But this This method is not compatible under IE6
View demo
<!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 charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽，右侧自适应(2)</title><style type="text/css"> *{margin: 0;padding: 0;} .left{ float: left; width: 200px; border: 1px solid #333; background: #aaa; } .right{ overflow: hidden; border: 1px solid #333; background: #ccc; word-break: break-all; }</style></head><body> <div class="left"> <h4>left</h4> <p>oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000</p> </div> <div class="right"> <h4>right</h4> <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888 BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888</p> </div></body></html>
Option three:
Use absolute positioning on the left and margin-left on the right
Viewdemo
<!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 charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽，右侧自适应(3)</title><style type="text/css"> *{margin: 0;padding: 0;} .left{ position: absolute; top: 0; left: 0; width: 200px; border: 1px solid #333; background: #aaa; } .right{ margin-left:200px; border: 1px solid #333; background: #ccc; word-break: break-all; }</style></head><body> <div class="left"> <h4>left</h4> <p>oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000</p> </div> <div class="right"> <h4>right</h4> <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888 BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888</p> </div></body></html>
Option 4:
Absolute positioning on the left and absolute positioning on the right
Viewdemo
<!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 charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽，右侧自适应(4)</title><style type="text/css"> *{margin: 0;padding: 0;} .left{ position: absolute; top: 0; left: 0; width: 200px; border: 1px solid #333; background: #aaa; } .right{ position: absolute; left: 200px; top:0; border: 1px solid #333; background: #ccc; word-break: break-all; }</style></head><body> <div class="left"> <h4>left</h4> <p>oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000</p> </div> <div class="right"> <h4>right</h4> <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888 BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888</p> </div></body></html> Option 5:
This method is relatively complicated, the div on the right There is also a div inside
Viewdemo
<!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 charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽，右侧自适应(5)</title><style type="text/css"> *{margin: 0;padding: 0;} .left{ float: left; margin-right: -100%; width: 200px; border: 1px solid #333; background: #aaa; } .right{ float: left; width: 100%; } .inner-right{ margin-left: 200px; border: 1px solid #333; background: #ccc; word-break: break-all; }</style></head><body> <div class="left"> <h4>left</h4> <p>oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000</p> </div> <div class="right"> <div class="inner-right"> <h4>right</h4> <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888 BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888</p> </div> </div></body></html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Front-end advanced test questions css_html/css_WEB-ITnoseNext article：Front-end advanced test questions css_html/css_WEB-ITnose