Home > Article > Web Front-end > 两列布局的设置方法总结_html/css_WEB-ITnose
两列布局的设置方法总结_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:101391browse
今天看到了这样一道题
用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化
自己感觉有好几种方法，再此总结下：
一、使用position：absolute方法，因为把元素设置为absolute，那元素就脱离了文档流，后面的元素就会占据他原来的位置：
<!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=utf-8" /><title>无标题文档</title></head><style type="text/css"> .side{width:190px;height:80px;background-color:#F00;<strong>position:absolute;</strong>} .exta{height:80px;background-color:#0f0;<strong>margin-left:190px;</strong> } </style><body> <div class="pd"> <div class="side">side</div> <div class="exta">exta</div> </div></body></html>
二、使用float方法
<!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=utf-8" /><title>无标题文档</title></head><style type="text/css"> .side{width:190px;height:80px;background-color:#F00; <strong> float</strong><strong>:left;</strong> } .exta{height:80px;background-color:#0f0; }//<strong>不能添加float:left;否则其宽度就会随内容变窄，不是随浏览器变化了</strong> </style><body> <div class="pd"> <div class="side">side</div> <div class="exta">exta</div> </div></body></html><br /><br />
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：CSS实现的带有箭头的矩形效果实例代码_html/css_WEB-ITnoseNext article：div css三列布局效果实例代码_html/css_WEB-ITnose