使用div和CSS的3列页面布局

克里希纳

我想在asp.net中创建一个页面,在这里我需要将页面分为3列,每列的宽度不同(20%,60%,20%),每列的高度应扩展到最大页面高度。
我不想使用position:absolute和使用left,top属性来定位div标签,因为有人说使用position:absolute不好,并且会在其他浏览器上造成问题。在这方面,请提供我任何其他解决方案的帮助。:)

罗希特

这是HTML

<div class="width20">
   Div with width 20%
</div>
<div class="width60">
   Div with width 60%
</div>
<div class="width20">
   Div with width 20%
</div>

这是CSS

body {
  margin:0;
  padding:0;
}
.width20 {
  float:left;
  width:20%;
  background:grey;
  height:100vh;
}
.width60 {
  float:left;
  width:60%;
  background:orange;
  height:100vh;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用HTML和CSS的基本印刷页面布局

来自分类Dev

如何使用div布局页面

来自分类Dev

CSS Flexbox 布局 - 3 列和 2 列互换

来自分类Dev

CSS页面布局-div调整大小

来自分类Dev

如何使用CSS和div实现此布局?

来自分类Dev

CSS、express 和 bootstrap:页面中的布局

来自分类Dev

如何使用HTML / CSS使页面布局居中?

来自分类Dev

CSS 布局问题 - DIV 和浮动

来自分类Dev

3列布局,可互换div

来自分类Dev

页面布局,CSS

来自分类Dev

对于3列CSS布局,如何更改HTML代码中div的顺序?

来自分类Dev

对于3列CSS布局,如何更改HTML代码中div的顺序?

来自分类Dev

仅使用CSS包装或并排的div布局

来自分类Dev

使用移动CSS布局在页面滚动上添加CSS规则

来自分类Dev

CSS页面布局问题:背景重复和页脚定位损坏

来自分类Dev

Bootstrap / CSS:3列布局中的布局问题

来自分类Dev

CSS和DIV 3列带有“ TILES”

来自分类Dev

使用CSS定位div:使用绝对定位div的布局问题

来自分类Dev

使用CSS的html表单的列布局

来自分类Dev

无法使用CSS网格/网格模板区域来布局页面

来自分类Dev

如何正确使用 css grid 进行页面布局?

来自分类Dev

如何使用 CSS FlexBox 创建这个复杂的页面布局

来自分类Dev

对齐和嵌套div(CSS布局出现问题)

来自分类Dev

CSS Div布局拉伸以适合宽度和高度

来自分类Dev

CSS div布局修复

来自分类Dev

固定div CSS布局

来自分类Dev

使用flex设计3列布局

来自分类Dev

使用flex设计3列布局

来自分类Dev

简单的问题:CSS页面布局