<html>
<head>
<title>div屏幕自适应宽度+两列中间栏等高</title>
<style type="text/css">
body{
padding:0;
margin:0;
text-align:center;
}
#wrapper{
width:90%;
height:auto;
margin:0 auto;
}
#header{width:100%;height:100px;background-color:red;float:left;clear:both;text-align:left;}
#main{width:100%;height:auto;float:left;clear:both;text-align:left;overflow:hidden;}
#left{width:30%;height:auto;float:left;text-align:left;background-color:yellow;}
#right{width:70%;height:auto;float:right;text-align:left;background-color:blue;}
#footer{width:100%;height:100px;float:left;clear:both;text-align:left;background-color:006600;}
#left,#right{padding-bottom:32767px;margin-bottom:-32767px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">HEADER<br />HEADER<br />HEADER<br /></div>
<div id="main">
<div id="left">LEFT<br />LEFT<br />LEFT<br />LEFT<br />LEFT<br />LEFT<br />
</div>
<div id="right">RIGHT<br />RIGHT<br />RIGHT<br /><br />
RIGHT<br />RIGHT<br />RIGHT<br /><br />
RIGHT<br />RIGHT<br />RIGHT<br /><br />
RIGHT<br />RIGHT<br />RIGHT<br /><br />
RIGHT<br />RIGHT<br />RIGHT<br /><br />
RIGHT<br />RIGHT<br />RIGHT<br /><br />
</div>
</div>
<div id="footer">FOOTER<br />FOOTER<br />FOOTER<br />FOOTER<br /></div>
</div>
</body>
</html>
分享到：
相关推荐
CSS 多种方法实现 div 两列等高 CSS 实现 div 两列等高是一种常见的布局方法，前端工程师们经常会遇到这种需求。今天，我们将学习使用多种方法实现 div 两列等高效果。 背景模拟实现等高 背景模拟是实现 div 两列...
"DIV+CSS+HTML布局（三行两列布局）"是一个常见的网页布局模式，广泛应用于各种网页设计项目中。这种布局将页面划分为三个垂直区域，每个区域内部再分为两列，从而提供了一个灵活且有序的展示空间。下面我们将详细...
### 用DIV+CSS实现国内经典式三行两列布局 #### 布局概述 在Web设计领域，有一种常见的布局方式被称为“三行两列”布局，这种布局广泛应用于企业站点和其他展示类网站中。典型的特征包括：顶部通常放置大型导航栏...
首先，要实现两列布局并让它们居中，我们可以采用一个外层的容器div（content），并在其中使用两个子div（side和main）。子div将通过CSS设置为浮动元素（使用float属性），使得它们并排显示。 接下来，我们会探讨到...
我们可以创建三个`<div>`，分别代表三行，然后在每个`<div>`内再嵌套两个子`<div>`，用于创建两列。下面是一个简单的HTML结构示例： ```html <!DOCTYPE html> 三行两列布局 .container { display: grid; ...
这里，`.container`被定义为一个Grid容器，`grid-template-columns`属性定义了两列，每列各占50%的宽度。这种方式同样保证了元素在同一行显示，同时也提供了更多的布局选项，如定义行和列的大小、对齐方式等。 ### ...
js实现 1.两列的左右拖动改变div大小 2.三列的左右拖动改变div大小 3.两行的上下拖动改变div大小 可用于各种框架 vue React Angular
CSS左右两列自适应高布局是一种网页布局技术，用于创建一个由左右两部分组成的页面布局，且这两列的高度能够自动调整以匹配最高的列，无论内容多少。这种布局对于创建对称的页面结构非常有用，例如双栏式布局，一侧...
`<div class="mycode">`包裹着两列内容，其中包含了工程地区的标签和对应的下拉菜单，以及工程类别的标签和下拉菜单。每个下拉菜单都有一个默认的“未选择”选项，以及多个具体选项供用户选择。 这个示例演示了如何...
在XHTML中，我们可以使用`<div>`元素作为布局的基本单元，创建一个两行两列的结构。基本代码框架如下： ```html <!DOCTYPE html> <div class="container"> <div class="row1"> <div class="column1">第一...
HTML中的`<div>`元素是页面布局的基本构建块，它是一个...这个例子可能展示了如何使用`<div>`进行基本的两列布局，并通过媒体查询实现响应式设计。学习和熟练掌握`<div>`的用法对于任何Web开发者来说都是至关重要的。
### 布局分类（两列） #### 概述 在网页设计中，两列布局是一种常见的布局方式，尤其适用于需要将内容分为两个主要部分显示的情况。本文将详细介绍如何使用CSS实现基本的两列布局，并解释相关的CSS属性及其实现...
综合以上信息，我们可以预期这个压缩包包含的资源将教授如何使用`<div>`标签来构建具有两列布局的网站模板。学习者可以通过查看和分析这些示例，了解`<div>`如何与其他HTML元素配合，以及如何通过CSS来控制`<div>`的...
在整体布局中，`float`常用于创建多列布局，如两列或三列布局。例如： ```css .left { float: left; width: 50%; } .right { float: right; width: 50%; } ``` 这样，两个`div`会并排显示，形成一个整体布局。 ...
在压缩包中的“templetes”文件夹，可能包含了各种Div+CSS布局的实例，比如两列布局、三列布局、响应式布局等。通过研究这些模板，你可以更深入地理解如何实际应用Div+CSS技术来构建网页。 学习Div+CSS布局不仅需要...
/* 两列等宽 */ grid-gap: 10px; } .grid-item { background-color: #f5f5f5; } ``` **Div的居中显示**： 要让Div居中，有多种方法，包括使用`text-align`、`margin`、Flexbox或Grid。 1. **Text-align...
例如，创建一个简单的两列布局，或者模仿知名网站的布局进行重构，都是很好的练习方式。同时，持续关注Web前端技术发展，掌握新的布局技术和最佳实践。 综上所述，DivCSS是网页设计的关键技术，理解和掌握其原理及...
3. **布局功能**：`<div>`常用于创建网页布局，如两列或三列布局，通过浮动（float）、定位（positioning）或者Flexbox或Grid布局模式实现。 4. **语义化**：虽然`<div>`没有特定的语义含义，但可以使用`role`属性...
/* 这将创建两列，每列宽度相等 */ } .div1, .div2 { /* 其他样式 */ } ``` 4. **使用CSS Columns**：虽然这不是一种并排显示的方法，但在某些情况下，如果希望内容在多列中流动，可以使用`column-count`属性。 ...