DIV+CSS (UL Li) to implement the following table layout in the text on the picture

CSS style sheet code:

HTML Layout Code:

：

HTML Layout section, you can add the corresponding div according to your needs.

1. CSS Key Style word explanation

1), ul.imglist{margin:0 auto; width:536px; Overflow:hidden}
Using margin:0 Auto, let the UL structure Layout Center;
Use Overflow:hidden because the children of UL use the Float property to produce floats, so using the clear child with float does not create a problem for the parent;
Use width width:536px; fixed width let the child Li accurate row row only 3 effect

2), Ul.imglist li{float:left; padding:4px 8px; width:160px}
Float:left, let Li on the left to start tied;
PADDING:4PX 8px Sets the spacing between Li and Li boxes;
width:160px must be set to a fixed li width (width value measured by the PS Software slicing tool)

3), Ul.imglist Li img{display:block; width:160px; height:90px}
Display:block set the exclusive line to the picture;
width:160px; height:90px must be fixed to set the height width of the picture.

4), ul.imglist Li span{display:block; width:100%; height:30px; line-height:30px; background: #F6F6F6}
Display:block allow span to set the width height to take effect at the same time exclusive row effects;
width:100%; height:30px; Set width and height, width 100% will inherit parent li width equal to setting (160px width, set 100% width benefit is automatically calculated 100% width and Parent width consistent with parent width);
line-height:30px; Set the text to center vertically in 30px;
Background: #F6F6F6设置span背景颜色

2, HTML key points
Use the UL Li combination list label layout, each Li box to put the picture + text title content, Li box directly using a hyperlink tag to the picture and text content wrapped, using the IMG tag to introduce pictures, Use the span tag to form two boxes with IMG and CSS to set the exclusive line style (Display:block) to prevent text and pictures from being lined up in a row rather than a top-down structure.

DIV+CSS (UL Li) to implement the following table layout in the text on the picture