css el-row 如何让某几个el-col绝对定位始终位于最左侧
时间: 2023-07-17 16:57:18 浏览: 314
要让某几个 `el-col` 绝对定位始终位于最左侧,你可以使用 CSS 的绝对定位属性来实现。以下是一个示例代码:
```html
<el-row class="container">
<el-col :span="6">Column 1</el-col>
<el-col :span="6" class="absolute-left">Column 2</el-col>
<el-col :span="6" class="absolute-left">Column 3</el-col>
<el-col :span="6">Column 4</el-col>
</el-row>
```
```css
.container {
position: relative;
}
.absolute-left {
position: absolute;
left: 0;
}
```
在这个示例中,我们给 `el-row` 添加了一个 `container` 类作为容器,并且在需要绝对定位的 `el-col` 上添加了 `absolute-left` 类。然后,通过设置 `position: absolute; left: 0;` 来实现这些列始终位于最左侧。
请注意,使用绝对定位时,被定位元素会脱离文档流,可能会影响其他元素的布局。确保你的布局适应这些列的绝对定位。
相关问题
css el-row 如何让某几个el-col绝对定位始终位于最左侧,有横向滚动条的情况下仍然在最左侧
要让某几个 `el-col` 绝对定位始终位于最左侧,即使存在横向滚动条,你可以使用 CSS 的 `position: sticky` 属性来实现。以下是一个示例代码:
```html
<div class="container">
<div class="scrollable">
<el-row>
<el-col :span="6">Column 1</el-col>
<el-col :span="6" class="sticky-left">Column 2</el-col>
<el-col :span="6" class="sticky-left">Column 3</el-col>
<el-col :span="6">Column 4</el-col>
</el-row>
</div>
</div>
```
```css
.container {
overflow-x: auto;
}
.scrollable {
display: inline-block;
}
.sticky-left {
position: sticky;
left: 0;
z-index: 1;
}
```
在这个示例中,我们创建了一个包含滚动条的容器,并将 `el-row` 放在一个内部的可滚动块中。通过设置容器的 `overflow-x: auto;` 属性,可以在需要时显示横向滚动条。
然后,我们给需要绝对定位的 `el-col` 添加了 `sticky-left` 类,并设置 `position: sticky; left: 0;` 来实现这些列始终位于最左侧。使用 `z-index: 1;` 可以确保它们在其他内容之前显示。
请注意,`position: sticky` 的兼容性可能会有所限制,特别是在某些移动设备上。确保在目标平台上进行兼容性测试。
el-row el-col 设置一排两个 设置两排
如果你想在一行中设置两个或多个 `el-col` 元素,并且希望它们可以自动换行,可以使用 `el-row` 组件的 `:gutter` 属性,并在 `el-col` 元素外层套一个 `div` 元素来实现。例如:
```html
<template>
<el-row :gutter="20">
<div v-for="i in 6" :key="i">
<el-col :span="12">col{{i}}</el-col>
</div>
</el-row>
</template>
```
在上述示例中,我们在 `el-row` 组件内部使用了一个 `div` 元素来包裹每个 `el-col` 元素,这样可以确保它们在自动换行时不会被打断。同时,我们还设置了 `:gutter="20"`,表示每个 `el-col` 元素之间的间距为 20 像素。
如果你想在一个页面中使用多个这样的布局,可以给它们分别设置不同的 `class` 名称,然后使用 CSS 样式来控制它们的外观。例如:
```html
<template>
<el-row :gutter="20" class="my-row">
<div v-for="i in 6" :key="i">
<el-col :span="12" class="my-col">col{{i}}</el-col>
</div>
</el-row>
</template>
<style>
.my-row {
margin-bottom: 20px;
}
.my-col {
background-color: #eee;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 20px;
}
</style>
```
在上述示例中,我们给 `el-row` 和 `el-col` 元素分别设置了 `class` 名称,并在 CSS 样式中为它们设置了不同的外观效果。同时,我们还通过给 `my-row` 类设置 `margin-bottom: 20px` 的样式来为每个布局之间添加间隔。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)