DIV+CSS布局 宽度自适应

简介: DIV+CSS布局 宽度自适应

<!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>
<style type="text/css">
 <!--
  body{margin:0 auto;position:relative;}
  #wrapper{ width:100%; margin:0 auto;}
  #mainer{ width:100%; float:left;margin-left:-250px; height:300px; }
  #sideBar{ float:left;width:250px;  height:300px; background:#00FFFF;}
  #main{min-width:200px; margin-left:250px;  height:300px; background-color:#CC3366;}

 -->

</style>

</head>

<body>
    <div id="wrapper">
        <div id="sideBar">宽度自适应</div>
        <div id="mainer">
             <div id="main">宽度自适应 宽度自适应</div>
        </div>
    </div>
</body>
</html>
相关文章
|
2月前
|
前端开发 JavaScript 容器
CSS 实战录: 双栏、四等分、不等间距、自适应...
CSS 实战录: 双栏、四等分、不等间距、自适应...
95 0
|
1月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
1月前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
1月前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
|
2月前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
59 4
|
2月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
前端开发 容器
CSS 实现图片宽度自适应
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82876666 ...
3026 0
|
4月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)