Hướng dẫn how to group div in html - cách nhóm div trong html

Tôi đang cố gắng tạo ra một lưới các biểu tượng truyền thông xã hội cho trang web của mình và tôi đang cố gắng tạo kiểu cho nó đúng cách.

Đây là những gì tôi hiện có:

HTML:

CSS:

.masonry-grid{margin: 3px;position:relative;}
.masonry-grid-item{width:25%;padding:3px; float: left;}
.masonry-grid-item a{display:block;position:relative;}
.masonry-grid-item a:before{width:100%;height:100%;display:block;content:"";position:absolute;visibility:hidden;opacity:0;filter:alpha(opacity=0);background-color:#000;transition:0.3s all;}
.masonry-grid-item a:hover:before{visibility:visible;opacity:0.2;filter:alpha(opacity=20);}
.masonry-grid-item.w2{width:50%;}
.masonry-grid-item.w3{width:75%;}
.masonry-grid-item.w4{width:100%;}
.masonry-grid img{width:100%;}
.grid-clear {clear:both; width:100%;} 
.w33{width: 31.73%; background: #818990; display: block; padding: 12.2% 0; margin: 0 2.4% 2.4% 0;}
.w33-last{margin-right: 0px;}
.w33-bot{margin-bottom: 0px;}
.wwd {text-align: left; padding: 20px;}
.masonry-grid-item .heading-container { background: rgba(0, 0, 0, 0.70) none repeat scroll 0 0; bottom: 5%; left: 0; position: absolute; width: 100%; width: 70%; text-align: left; padding: 20px 0 20px 20px;}
.masonry-grid-item h2 { color: #fff; margin: 0; padding: 0;}
.masonry-grid-item h2 {display: block; width: 100%; background: #44ac6d; padding: 10px 20px; color: #fff;}

Có cách nào để làm cho các khối phương tiện truyền thông xã hội mở rộng lên toàn bộ chiều cao của div mà nó chứa trong. Và rõ ràng khi bạn thay đổi kích thước cửa sổ, nó co lại hoặc tăng theo container.

Đây là một ví dụ về những gì tôi đang tìm kiếm

Banzay

9.2002 huy hiệu vàng25 Huy hiệu bạc45 Huy hiệu đồng2 gold badges25 silver badges45 bronze badges

Đã hỏi ngày 9 tháng 12 năm 2016 lúc 11:22Dec 9, 2016 at 11:22

Flexbox sẽ cho phép bạn nói với các yếu tố của bạn chiếm 100% không gian dọc.

Tôi đã cập nhật mã của mình để sử dụng Flex Box - bạn sẽ cần phải loại bỏ các phần tử trong khi chúng chiếm không gian dọc.

CSS duy nhất tôi đã thêm là display:flex;flex-wrap:wrap; vào phần tử container của bạn. (Ive đã thêm một màu nền và buộc chiều cao div trong fiddle để đưa ra một ví dụ)

Đã trả lời ngày 9 tháng 12 năm 2016 lúc 12:02Dec 9, 2016 at 12:02

Hairmothairmothairmot

2.9651 Huy hiệu vàng12 Huy hiệu bạc25 Huy hiệu đồng1 gold badge12 silver badges25 bronze badges

5

Bạn có thể sử dụng FlexBox, kiểm tra ví dụ này (tương tự như bạn):

HTML:

CSS:

.social-grid {
  width: 80%;
  height: 300px;
  background: grey;
  //FLEX!
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: space-between;
}

.social-item {
  width: 26%; //more than 1/4
  height: 130px;
  background: green;
}

Đã trả lời ngày 9 tháng 12 năm 2016 lúc 12:13Dec 9, 2016 at 12:13

Bạn có thể có một div trong một div trong html?

Thẻ nào được sử dụng để nhóm trong HTML?