不使用绝对定位,是否可以实现下面的布局?
创始人
2024-12-28 22:31:04
0

是的,可以使用其他布局方式来实现下面的布局,而不使用绝对定位。以下是一种解决方法,使用相对定位和浮动来实现布局。

HTML代码示例:

Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae semper enim, ut venenatis nibh. Fusce id placerat quam. Nam non lorem ex. Sed bibendum tristique faucibus. Integer elementum euismod nisl, id aliquet diam maximus ac. Curabitur faucibus lacus nec turpis tempor, a interdum lorem dignissim.

CSS代码示例:

.container {
  display: flex;
}

.sidebar {
  width: 200px;
  background-color: lightgray;
}

.content {
  flex-grow: 1;
  background-color: white;
}

.sidebar, .content {
  padding: 20px;
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

在这个示例中,我们使用了display: flex;来创建一个容器元素.container,并且设置了它的子元素.sidebar.content为弹性项。通过设置.sidebar的宽度和.contentflex-grow: 1;,我们可以让侧边栏固定宽度,而主内容会自动填充剩余的空间。

.sidebar.content都设置了一些内边距,以及背景颜色用于区分它们。

通过这种方式,我们可以避免使用绝对定位,而以一种更灵活和可响应的方式来实现布局。

相关内容

热门资讯

前端-session、jwt 目录:   (1)session (2&#x...
linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
关于测试,我发现了哪些新大陆 关于测试 平常也只是听说过一些关于测试的术语,但并没有使用过测试工具。偶然看到编程老师...
前缀和与对数器与二分法 1. 前缀和 假设有一个数组,我们想大量频繁的去访问L到R这个区间的和,...
nodejs:本地安装nvm实... 一、背景-使用不同版本node的原因 vue3+ts、nuxt3版本,node...
JAVA集合知识整理 Java集合知识整理 HashMap相关 HashMap的底层数据结构:jdk1.8之...
无刷直流电机介绍及单片机控制实... 无刷直流电机介绍及单片机控制实例前言基本概念优势与劣势使用寿命基本结构使用单片机控制实例电子调速器&...
fwdiary(2) dp2 1.传纸条  AcWing 275. 传纸条 - AcWing 走两条路,走一条最大的...
常用的DOS命令 常用的DOS命令 DOS(Disk Operating System,磁...
<C++> 类和对象(下) 1.const成员函数将const修饰的“成员函数”称之为const成员函数,cons...