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>
相关文章
|
8月前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
267 1
|
8月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
523 0
|
11月前
|
Web App开发 前端开发 数据可视化
用 CSS Grid 实现高效布局的 3 个实战技巧
用 CSS Grid 实现高效布局的 3 个实战技巧
|
11月前
|
前端开发
文字显示在div 最下面,css怎么写
文字显示在div 最下面,css怎么写
707 0