第四篇我们还是来探讨左右下布局。只是这一次,左边区域是定宽的,右边和下边不定。
还是先看看效果图:
然后上代码:
<div id="container">
<div id="wrapper">
<!-- 中间content start -->
<div id="content" class="red">
content
</div>
<!-- 中间content end -->
</div>
<!-- 左侧navigation start -->
<div id="navigation" class="yellow">
navigation
</div>
<!-- 左侧navigation end -->
<!-- 下侧extra start -->
<div id="extra" class="orange">
extra
</div>
<!-- 下侧extra end -->
</div>
css代码:
#container{}
#wrapper{float:left;width:100%;}
#content{margin-left:200px;}
#navigation{float:left;width:200px;margin-left:-100%;}
#extra{clear:both;width:100%;}
- 大小: 8.6 KB
分享到:
相关推荐
CSS Pro布局 CSS库,用于构建响应式和可自定义的页面布局 文献资料 有关完整文档,请访问 入门 您可以使用NPM或Yarn安装CSS专业版 NPM npm install css-pro-layout 纱 yarn add css-pro-layout 将css-pro-layout....
css布局与定位
SwiftBox - Swift中的Flexbox使用Facebook的css-layout
common-css-layout
Flex-layout-attributeFlex-layout-attribute 是基于 CSS flexbox 规范的 HTML 布局助手。示例内容分布在一行里并在容器居中: layout="row center-center"> <div>1 <div>2 <div>3 </div>DEMO特点专注于 ...
布局CSS文件layout.css 提供与布局有关的CSS定义 文件下载
tailwindcss-layout-examples 使用Tailwind CSS框架进行的单页布局简单演示。
jquery.layout 布局插件精简版,对依赖ui.core和拖拽进行精简
React网格布局 React-Grid-Layout是一个类似于React的或的网格布局系统。与那些系统不同,它具有响应能力并支持断点。断点布局可以由用户提供或自动生成。 RGL仅适用于React,不需要jQuery。来自生产使用情况的GIF ...
basic-css-layout-demo:简单的html + css代码演示了一些布局技巧
vw-layout是一个NPM软件包,可帮助您使用视口单位创建移动网站布局。 它依赖于 , 和 。 另外,为了与更多的移动设备兼容,视口单元需要使用视口单元中的polyfill。 我们可以使用 。安装npm i vw-layout --save用法...
使用CSS3实现六边形网格页面布局,该demo可用于CSS3学习和类似布局参考
nomad-css-layout-masterclass 网站网址: : 演讲厅: : Nocolas的Github: : 用克隆编码(电影网) (购物中心) (投资组合) (法国投资组合) (购物+投资组合。澳大利亚) (丹麦购物中心) (投资组合) ...
网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一...
CSS网格布局生成器 建立复杂CSS网格布局的最快,最简单方法 路线图 不久 自动生成的网格轨道(又名隐式网格轨道) 列和行的repeat()表示法 列和行的fit-content()表示法 出口代码 将HTML导出为JSX 将CSS...
关于CSS40个布局实列CSS布局大全:40多个教程,提示,例子和最佳实践 CSS布局教程 1-Three column fixed layout structure using CSS- 这篇文章解释了如何显示HTML/CSS基本结构。 2-Design page layout using CSS- 如何...
The New Css Layout CSS 布局
CSS布局3 网格和Flex中的响应式布局 与您的好友一起工作。 创建一个基本的网站布局,并使其与grid和flex响应。 当您拉伸和压缩浏览器窗口时,它应该会自动正确调整自身大小。 就像 要进行测试->检查并选择另一台...
CSS布局3 网格和Flex中的响应式布局与您的好友一起工作。 创建一个基本的网站布局,并使其与grid和flex响应。 当您拉伸和压缩浏览器窗口时,它应该会自动正确调整自身大小。 就像要进行测试->检查并选择另一台设备,...
简易CSS布局 演示版 前言 仅用于练习和备份 关于样式的颜色设置,这里存在一些问题,但是我不想修改它们。 如果您想通过本演示进行练习 首先,您需要在“演示”列中查看演示,并自己写下代码 如果您无法实现这些...