首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将两个div上下与右侧的<aside>对齐?

要将两个div上下与右侧的<aside>对齐,可以使用CSS的flexbox布局来实现。具体步骤如下:

  1. 在父容器上应用flexbox布局。给父容器添加以下CSS样式:
代码语言:txt
复制
.container {
  display: flex;
  flex-direction: column;
}

这将使得子元素按照垂直方向排列。

  1. 将两个div和<aside>放入父容器中。HTML结构如下:
代码语言:txt
复制
<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <aside>Aside</aside>
</div>
  1. 设置子元素的对齐方式。给两个div添加以下CSS样式:
代码语言:txt
复制
.container div {
  align-self: flex-start;
}

这将使得两个div在垂直方向上与父容器对齐。

  1. 设置<aside>元素的对齐方式。给<aside>添加以下CSS样式:
代码语言:txt
复制
.container aside {
  align-self: flex-end;
}

这将使得<aside>在垂直方向上与父容器对齐。

完整的示例代码如下:

代码语言:txt
复制
<style>
.container {
  display: flex;
  flex-direction: column;
}

.container div {
  align-self: flex-start;
}

.container aside {
  align-self: flex-end;
}
</style>

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <aside>Aside</aside>
</div>

这样,两个div就会与右侧的<aside>在垂直方向上对齐了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

css布局使用

上一种方法相比,本种方法是通过定位来实现侧栏位置固定。 如果中间栏含有最小宽度限制,或是含有宽度内部元素,则浏览器窗口小到一定程度,主面板侧栏会发生重叠。...圣杯布局(float + 负margin) **原理说明**: 主面板设置宽度为100%,主面板两个侧栏都设置浮动,常见为左浮动,这时两个侧栏会被主面板挤下去。...通过负边距将浮动侧栏拉上来,左侧栏负边距为100%,刚好是窗口宽度,因此会从主面板下面的左边跑到主面板对齐左边,右侧栏此时浮动在主面板下面的左边,设置负边距为负自身宽度刚好浮动到主面板对齐右边...由于侧栏负margin都是相对主面板两个侧栏并不会像我们理想中停靠在左右两边,而是跟着缩小主面板一起向中间靠拢。此时使用相对布局,调整两个侧栏到相应位置。..."> 左侧边栏宽度固定 主内容栏宽度自适应 右侧边栏宽度固定

1.9K90
  • CSS魔法堂:Flex布局

    为主轴结束位置,默认是主轴和右侧边框交叉点; cross axis为交叉轴,默认是垂直方向; cross start为交叉轴起始位置,默认是交叉轴和上边框交叉点; cross end为交叉轴结束位置...* row - 默认值,main axis为水平,main start为主轴和左侧边框交叉点,main end为主轴和右侧边框交叉点 * cross axis为垂直...,cross start为交叉轴和上边框交叉点,cross end为交叉轴和下边框交叉点 * row-reverse - main axis为水平,main start为主轴和右侧边框交叉点,main...,cross end为交叉轴和右侧边框交叉点 * column-reverse - main axis为垂直,main start为主轴和下边框交叉点,main end为主轴和上边框交叉点 *...axis方向对齐方式。

    39430

    CSS魔法堂:Flex布局

    为主轴结束位置,默认是主轴和右侧边框交叉点; cross axis为交叉轴,默认是垂直方向; cross start为交叉轴起始位置,默认是交叉轴和上边框交叉点; cross end为交叉轴结束位置...* row - 默认值,main axis为水平,main start为主轴和左侧边框交叉点,main end为主轴和右侧边框交叉点 * cross axis为垂直...,cross start为交叉轴和上边框交叉点,cross end为交叉轴和下边框交叉点 * row-reverse - main axis为水平,main start为主轴和右侧边框交叉点,main...,cross end为交叉轴和右侧边框交叉点 * column-reverse - main axis为垂直,main start为主轴和下边框交叉点,main end为主轴和上边框交叉点 *...axis方向对齐方式。

    53730

    如何使用Flexbox和CSS Grid,实现高效布局

    幸运是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来。 使用 Flexbox 可以使元素对齐变得容易,因此 Flexbox 已经被广泛使用了。...通过这个声明,导航元素放置会变得很容易。 导航栏左侧有一个 logo 和两个菜单项,右侧有一个登录按钮。...在导航中,使用 align-items: baseline; 能够实现所有导航项目文本基线对齐,这样也使得导航栏看起来更加统一。...具有 .wrapper 类 div,也需要设置 display: flex; 但是 flex 方向上述不同。这是因为侧边栏和主内容区域彼此相邻而不是堆叠。...这样 header 中就有两个相同大小列,放置导航项和按钮会很合适。

    3.5K10

    VUE Cookbook 系列:实现可配置组合表单

    在左侧新建表单区块,选择区块标题和表单组件类型后点击确定,会在中间区域生成一个块新表单,右侧展示了所有表单数据合并结果。...-- 右侧位置 --> 从左侧选择要添加表单块,右侧查看结果</template...、keys、id resolve: 是一个函数,他返回是被解析模块id keys: 也是一个函数,他返回是一个数组,该数组是由所有可能被上下文模块解析请求对象组成 id:上下文模块id 所以在上面代码中... 从左侧选择要添加表单块,右侧查看结果 <...左侧右侧组件不是重点内容,所以一次性展示出带有注释代码 新建 page1/components/AsideRight/index.vue 作为右侧页面组件 <el-aside

    1.3K20

    VUE Cookbook 系列:实现可配置组合表单

    示例源代码 github 操作演示: 在左侧新建表单区块,选择区块标题和表单组件类型后点击确定,会在中间区域生成一个块新表单,右侧展示了所有表单数据合并结果。...-- 右侧位置 --> 从左侧选择要添加表单块,右侧查看结果</template...:resolve 、keys、id * resolve: 是一个函数,他返回是被解析模块id * keys: 也是一个函数,他返回是一个数组,该数组是由所有可能被上下文模块解析请求对象组成 *...左侧右侧组件不是重点内容,所以一次性展示出带有注释代码 新建 page1/components/AsideRight/index.vue 作为右侧页面组件 <el-aside...'未填写' : item.value}} export default { props

    96530

    Grid layout + 媒体查询轻易实现常用响应式布局

    、边距和填充有限制inline-block按钮、小部件内联元素宽高控制大型布局、自动布局结合了inline和block特点对齐问题、间隙问题flex导航栏、卡片布局、复杂一维布局一维布局、对齐、分布空间二维布局复杂场景强大对齐能力...、对齐、模板区域旧浏览器不兼容强大二维布局能力、精确布局控制学习曲线高、兼容性问题inline-grid内联复杂布局内联元素二维布局grid相同grid优点,但适用于内联环境grid相同,不适合大型二维布局...对齐网格项:.item { justify-self: start;/* 水平对齐到网格区域起始边缘 */ align-self: end;/* 垂直对齐到网格区域末端边缘 */}可以控制单个网格项在其网格区域内对齐方式...在页面稍微变宽点时候,呈现中间部分显示效果。如果页面在宽到一定程度时候就,变成右侧部分显示效果。怎么做到这个呢?我给你一个初始代码: Sidebar Advertising

    65931

    CSS入门指南-4:页面布局

    你可以把两个 标签写在两行,但这并不影响图片再浏览器中显示效果,它们会并列出现在一行上。而且标签直接空白(标记中两个 ?...这样,只要简单地设定内部div外边距和内边距,就可以让它们以及它们包含内容栏边界保持一定距离。...这里有一个前一页相同例子,唯一区别是两个元素都设置了 box-sizing: border-box; nav { -webkit-box-sizing:border-box; -moz-box-sizing...你需要设置每一列宽度 如果HTML源代码中元素之间有空格,那么列列之间会产生空隙 特别是第三条,如果我们不做任何修改,两个 block 之间会存在空格,像这样: ?...因为列列之间产生了空格,所以 aside 跑到了下边。

    2.2K10
    领券