cuốn sách gpt4 ai đã làm

html - 使用 CSS 的上-下-左-右-上-左-右-上-下内容流

In lại Tác giả: Walker 123 更新时间:2023-11-28 01:46:44 26 4
mua khóa gpt4 Nike

我想要从上到下和从左到右组织的 css block 。

为了更好地解释这是一张图片,其中包含我到目前为止所获得的内容以及我希望使用 CSS 实现的内容:../../../vowlqIZ.png

Mã này như sau:

HTML:


1

2

3

4

5

6

7

8

9


CSS:

#container {height: 200px; background-color: #2795b6;}
.box {color: red; display: block;height:50px;width:50px}

这是 JsFiddle:http://jsfiddle.net/ySG5Y

这是我正在尝试制作的水平无限滚动页面的一部分。现在您知道了,您可以更好地了解情况。

我希望有人能够以任何方式帮助我,并原谅我的知识不那么丰富。

Cảm ơn

附言。现在我知道还有一些其他问题看起来像是重复的。我不知道,但我想将它集成到水平无限滚动中,所以我相信这可能是一个“原始问题”。

毕竟我不知道要描述这个所以那些在发布后显示。

câu trả lời hay nhất

我会再使用一个分组(每 4 个元素)



1

2

3

4



5

6

7

8



9



并使用

#thùng chứa {
chiều cao: 200px;
background-color: #2795b6;
font-size:0; /*to ignore whitespace due to inline-block of group elements*/
white-space:nowrap; /*to avoid wrapping of groups once they fill their container*/
}
.group{
vị trí: tương đối;
display:inline-block; /*make them stack horizontally*/
chiều rộng: 50px;
chiều cao: 200px;
font-size:16px;
vertical-align:top;
}
/*for the even groups set the box elements to absolute and reverse order*/
.group:nth-child(even) .box{position:absolute;left:0;}
.group:nth-child(even) .box:nth-child(1){bottom:0;}
.group:nth-child(even) .box:nth-child(2){bottom:50px;}
.group:nth-child(even) .box:nth-child(3){bottom:100px;}
.group:nth-child(even) .box:nth-child(4){bottom:150px;}

.hộp {
màu sắc: đỏ;
hiển thị: khối;
chiều cao:50px;
chiều rộng: 50px;
căn chỉnh văn bản:giữa;
line-height:50px;
background:black;
}
.box:nth-child(even) {background:white;}

演示在 http://codepen.io/gpetrioli/pen/qAIKd

这将产生
nhập mô tả hình ảnh ở đây

关于html - 使用 CSS 的上-下-左-右-上-左-右-上-下内容流,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22233929/

26 4 0
Xem sitemap của VNExpress