Css + div image arrangement style

I have previously written a div image arrangement tutorial. Let's write another article today. The following pictures are arranged in the image arrangement.

Next let's take a look at the code for css image arrangement.

<Div id = "right_photo">
<Ul>
<Li> <a title = "79 visual Photography Institute" href = "images/01.jpg" rel =" lightbox [roadtrip] "> </a> </li>
<Li> <a title = "79 visual Photography Institute" href = "images/01.jpg" rel =" lightbox [roadtrip] "> </a> </li>
<Li> <a title = "79 visual Photography Institute" href = "images/01.jpg" rel =" lightbox [roadtrip] "> </a> </li>
<Li> <a title = "79 visual Photography Institute" href = "images/01.jpg" rel =" lightbox [roadtrip] "> </a> </li>
<Li> <a title = "79 visual Photography Institute" href = "images/01.jpg" rel =" lightbox [roadtrip] "> </a> </li>
<Li> <a title = "79 visual Photography Institute" href = "images/01.jpg" rel =" lightbox [roadtrip] "> </a> </li>

</Ul>
</Div>

The above code is as simple as li, a ul, and div. The code is much simpler than table. It's better to run the question. Let's take a look at the css code.

# Right_photo {
Background-color: # 625f5f;
Background-image: url (images/page_case_07.gif );
Background-repeat: no-repeat;
Background-position: left top;
Height: 609px;
}
# Right_photo li {
Float: left;
Width: 130px;
Padding-top: 22px;
Padding-right: 26px;
Padding-bottom: 22px;
Padding-left: 26px;
}
# Right_photo li {
Height: Pixel px;
Width: Pixel px;
Margin-right: auto;
Margin-left: auto;
Display: block;
}
# Right_photo li img {
Border: 2px solid # e987b1;
}

OK. We can directly control the li, a, ul, and img labels in right_photo by id.

This site is original, please respect the work of the Author, please indicate from: www.111cn.net/cssdiv/css.html