I'm really new to CSS and I'm having some issues with divs. I'm not quite sure how to word my question correctly and am unfamiliar with a lot of the terminology used, so I'm having trouble finding the answer to my question.
Basically, my goal is to have a container that holds several square or rectangular divs at different sizes (160x160px, 320x320px and 160x320px) so that they can be displayed in a responsive grid.
The issue I'm having is that sometimes the larger divs will 'push' things away from them; for example, the smaller divs will not appear to the left of the bottom half of the 320x320 div class.
The CSS I've written looks like this;
body{
max-width: 1280px;
background-color: #333333;
}
div{
border: 1px solid #333333;
height: 158px;
width: 158px;
float: left;
text-align: center;
background-color: #cc00ff;
display: block;
float: left;
vertical-align: text-bottom;
}
.extra{
height: 158px;
width: 318px;
background-color: #ccff00;
}
.feature{
height: 318px;
width: 318px;
background-color: orange;
}
I have this linked in the HTML pasted below with about 20 divs, some with the classes for the div.
扫一扫
9498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
