Home > Web Front-end > HTML Tutorial > Three commonly used automatic adaptation width columns in div css_html/css_WEB-ITnose

Three commonly used automatic adaptation width columns in div css_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:28:43
Original
1308 people have browsed it

CSS两列布局,右侧固定,左侧自适应宽度 <div style="width:90%; margin:0 auto; overflow:auto; _display:inline-block;"> 	<div style="width:200px; float:right; background:#090">这是右侧的内容</div> 	<div style=" margin-right:210px; background:#F33">这是左侧的内容,自适应宽度</div> </div> CSS两列布局,左侧固定,右侧自适应宽度 <div style="width:90%; margin:0 auto; overflow:auto; _display:inline-block;"> 	<div style="width:150px; float:left; background:#6F0">这是左侧的内容 固定宽度</div> 	<div style=" margin-left:160px; background:#FC0">中间内容,自适应宽度</div> </div> CSS三列布局,左右宽度固定,中间自适应宽度 <div style="width:90%; margin:0 auto; overflow:auto; _display:inline-block;"> 	<div style="width:200px; float:right; background:#393"> 这是右侧的内容 固定宽度</div> 	<div style="width:150px; float:left; background:#F60 ">这是左侧的内容 固定宽度</div> 	<div style=" margin-left:160px;margin-right:210px; background:#6C3;">中间内容,自适应宽度</div> </div>
Copy after login

overflow:auto; _display:inline-block; clears floats, _display:inline-block; is for IE6.

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template