Home  >  Article  >  Web Front-end  >  两列布局的设置方法总结_html/css_WEB-ITnose

两列布局的设置方法总结_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:31:101399browse

今天看到了这样一道题

用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 

自己感觉有好几种方法,再此总结下:

 一、使用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