Css + div text-and-text multi-column multi-row

Now let's take a look at the code compiling method of css + div text-and-text mixing layout with multiple columns and multiple rows. Let's first look at the effect picture.

This is an effect Image. Let's see how css is laid out;

<Dl class = "sitemapdl">
<Dt class = "sitemapdt"> Join Magic Fun </dt>
<Dd> <a href = "http: // jmmq/jmly. php"> reason for joining </a> </dd>
<Dd> <a href = "http://www.111cn.net"> Investment Q & a </a> </dd>
<Dd> <a href = "http://www.111cn.net"> joining program </a> </dd>
<Dd> <a href = "http://www.111cn.net"> franchise policy </a> </dd>
<Dd> <a href = "http://www.111cn.net"> Join application </a> </dd>
<Dd> <a href = "http://www.111cn.net"> stores </a> </dd>
</Dl>
<Dl class = "sitemapdl">
<Dt class = "sitemapdt"> Talent Center </dt>
<Dd> <a href = "http://www.111cn.net"> Talent concept </a> </dd>
<Dd> <a href = "http://www.111cn.net"> recruitment position </a> </dd>
<Dd> <a href = "http://www.111cn.net"> talent reserve center </a> </dd>
</Dl>
<Dl class = "sitemapdl">
<Dt class = "sitemapdt"> Customer Service Center </dt>
<Dd> <a href = "http://www.111cn.net"> I want to order meals </a> </dd>
<Dd> <a href = "http://www.111cn.net"> VIP zone </a> </dd>
<Dd> <a href = "http://www.111cn.net"> Contact me </a> </dd>
</Dl>

We use dl dt dd in css div layout.

. Sitemapdl {
Margin: 50px 20px 0 0;
Background: url (imgs/sitemapback.gif) no-repeat top left;
Float: left;
Height: 200px;

Width: 130px;

Border-right: 1px dotted # e5e5e5;
}
. Sitemapdt {
Height: 30px;
Width: 117px;
Color: # ffffff;
Font-size: 13px;
Font-weight: bold;
Line-height: 22px;
Padding: 0 0 0 7px;
}
# Rclncotent dd {
Margin: 5px 0 0 10px;
Padding: 0 0 0 20px;
Background: url (imgs/sitemapdot.gif) no-repeat 0 3px;
}
# Rclncotent dd a: hover {
Color: # fd8e1c;
}

After writing it, please indicate www.111cn.net/cssdiv/css.html for original reprinting on this site.