Inline-block of "HTML" learning record-css

• Create a grid layout with Inline-block

Inline-block is one of the property values of the display property described above.

The following is an example:

< Section><Div><imgsrc= "Http://img4.duitang.com/uploads/blog/201507/20/20150720233624_yzAak.thumb.700_0.jpeg"></Div><Div><imgsrc= "Http://img5.duitang.com/uploads/blog/201507/20/20150720233639_vknSG.thumb.700_0.jpeg"></Div><Div><imgsrc= "Http://img4.duitang.com/uploads/blog/201507/20/20150720233626_Adn3e.thumb.700_0.jpeg"></Div><Div><imgsrc= "Http://img5.duitang.com/uploads/blog/201507/20/20150720233630_x52vE.thumb.700_0.jpeg"></Div><Div><imgsrc= "Http://img5.duitang.com/uploads/blog/201507/20/20150720233636_2uwhP.thumb.700_0.jpeg"></Div><Div><imgsrc= "Http://img4.duitang.com/uploads/blog/201507/20/20150720233632_tLhSJ.thumb.700_0.jpeg"></Div><Div><imgsrc= "Http://cdn.duitang.com/uploads/blog/201507/20/20150720233618_A5F8L.thumb.700_0.jpeg"></Div><Div><imgsrc= "Http://img4.duitang.com/uploads/blog/201507/20/20150720233621_4KEZJ.thumb.700_0.jpeg"></Div><Div><imgsrc= "Http://img5.duitang.com/uploads/blog/201507/20/20150720233615_T285d.thumb.700_0.jpeg"></Div><FooterID= "After-float"Align= "Center">---days, a set of slag base three will never miss my hitomi father Qaq---</Footer></ Section><styletype= "Text/css"> Section{width:415;padding:10px;margin:30px Auto;}Div{width:90px;Height:90px;Border:1px solid #ccc;margin:10px;padding:10px;  /*using Inline-block*/Display:Inline-block;}img{width:80px;Height:80px;}</style>

The effect is as follows:

Yes, that's it, Qaq.

In summary, using the Inline-block property is easier than setting the float property, because float also remembers the clear effect.

Inline-block of "HTML" learning record-css