One of the methods is as follows:
The picture and picture description.html file code is as follows:
< li>
< /html>
The img.css file code is as follows: body?{
background:?#fff;
margin:?0?auto;
}
dl?{
margin:?0?24px;
padding:?10px;
width: ?920px;?/*?This is the key line, controlling the total width of the list?*/
}
dl?li?{
list-style- type:?none;?/*?Remove the dot before the list?*/
display:?inline;/*?This is the key line to make the list inline?*/
float:?left;/*?This is the key line to make all inline list elements float left?*/
}
dl?li?p?. img?{
width:?200px;?/*?This is the key line, controlling the width of the image?*/
height:?200px;
display :?block;/*?This is the key line, turning the inline image into a block-level box model?*/
margin-bottom:?5px;/*?Add 5px to the block-level box model image Lower margin?*/
}
dl?li?p?{
text-align:?center;/*?This is the key line, Control the text to be centered?*/
}
dl?li?p.marginright?{
margin-right:?40px;/*?This is the key OK, control the width of the right outer margin of the image 1?2?3?5?6?7?*/
text-align:?center;
} Your problem lies in HTML Add appropriate tags
to in theIn CSS, there are three main problems to solve.
1. Control the total width of the
1.1
1.2 Picture 1 2 3 4 Each picture Width 200px (height 200px), the outer right margin of each
including pictures 1, 2, and 3 is 40px. The total width of the first line is 920px, and the total width of1.3 Each picture of pictures 5, 6, 7 and 8 is 200px wide (200px high), including pictures 5, 6, 7.
Each outer right margin is 40px, and the second row has a total width of 920px, < The total width of dl/> is 920px, which is the second row.2. Use display:inline; to make
3. Then use display:block; to turn the
containing "