html布局 跨行,[CSS] 多方案实现跨行或跨列布局

多方案实现多方案实现跨行或跨列布局

.g-container {

margin: 20px auto;

width: 400px;

}

h2 {

font-size: 28px;

text-align: center;

margin: 30px auto;

}

.g-item {

width: 190px;

height: 190px;

box-sizing: border-box;

border: 1px solid #666;

border-radius: 10px;

line-height: 190px;

font-size: 32px;

text-align: center;

cursor: pointer;

margin: 5px;

transition: 1s all;

}

.g-float {

overflow: hidden;

}

.g-float .g-item {

float: left;

}

.g-float .g-item:first-child {

/* :first-child, 选取属于其父元素的首个子元素 */

height: 390px;

}

.g-float .g-item:first-child:hover {

height: 190px;

width: 390px;

}

.g-flex {

display: flex;

flex-direction: column;

justify-content: space-between;

flex-wrap: wrap;

width: 400px;

height: 400px;

}

.g-flex .g-item:first-child {

height: 390px;

}

.g-flex:hover {

/* hover 一定添加在父级元素上， 无法通过子元素的hover去修改父元素的样式 */

flex-direction: row;

}

.g-flex:hover .g-item:first-child {

height: 190px;

width: 390px;

}

/* repeat(): https://developer.mozilla.org/zh-CN/docs/Web/CSS/repeat */

.g-grid {

display: grid;

grid-template-rows: repeat(2, 50%); /* 50% 重复两次 */

grid-template-columns: repeat(2, 50%);

width: 400px;

height: 400px;

transition: 5s all;

}

/* unset 从其父级继承，则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。*/

.g-grid .g-item {

width: unset;

height: unset;

}

/* https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-row */

.g-grid .g-item:first-child {

grid-row: 1 / 3; /* 行起始1线 / 行结束3线 */

grid-column: 1 / 2; /* 列起始1线 / 列结束2线 */

}

.g-grid:hover .g-item:first-child {

grid-row: 1 / 2;

grid-column: 1 / 3;

}

/* gird布局的动画只能在部分属性上生效，具体见下文 */

/* https://stackoverflow.com/questions/43911880/using-css-transitions-in-css-grid-layout */

float 实现

0

1

2

3

4

flex 实现

0

1

2

grid 实现

0

1

2

3

4