Heim >Web-Frontend >HTML-Tutorial >两列布局的设置方法总结_html/css_WEB-ITnose
两列布局的设置方法总结_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:101421Durchsuche
今天看到了这样一道题
用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化
自己感觉有好几种方法，再此总结下：
一、使用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 />
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS实现的带有箭头的矩形效果实例代码_html/css_WEB-ITnoseNächster Artikel：div css三列布局效果实例代码_html/css_WEB-ITnose