Css text-and-text mixed layout code

In this article, the css text-and-text mixed layout style code is very helpful for beginners. Let's take a look at what styles are arranged first.

That's the effect. Now let's take a look at his css code.

The code is as follows:

Copy code

<Div id = "ployMain"> <H4> <Dl> <Dt> </dt> <Dd class = "dishTitle"> chopped green peppers </dd> <Dd class = "dishMain"> I have been thinking about the snacks in Huimin Street. While walking and eating, my stomach is round like a ball ..... </Dd> <Dd class = "dishOn"> <a href = "#"> I want to comment> </a> </dd> </Dl> <Dl> <Dt> </dt> <Dd class = "dishTitle"> chopped green peppers </dd> <Dd class = "dishMain"> I have been thinking about the snacks in Huimin Street. While walking and eating, my stomach is round like a ball ..... </Dd> <Dd class = "dishOn"> <a href = "#"> I want to comment> </a> </dd> </Dl>             </Div>

This is the figure above, which we wrote with css + div layout. Let's take a look at the style ployMain, dishTitle, dishMain, dishOn.

The code is as follows:

Copy code

# PloyMain { Float: left; Width: 436px; } # PloyMain dl { Padding-left: 20px; Display: block; Padding-top: 12px; Clear: both; Height: 100px; } # PloyMain dt { Display: block; Float: left; Height: 90px; Width: 120px; Background-color: # E0E0E0; Border: 1px solid # A4C934; 5 } # PloyMain dt {   } Dd. dishTitle { Line-height: 22px; Height: 22px; Display: block; Float: left; Margin-left: 20px; Color: # efa11c; Font-weight: 700; } Dd. dishMain { Display: block; Width: 250px; Float: left; Line-height: 22px; Margin-left: 20px; Padding: 0px; Margin-top: 0px; Margin-right: 0px; Margin-bottom: 0px; Border-bottom-width: 1px; Border-bottom-style: solid; Border-bottom-color: # a4c934; } Dd. dishOn { Display: block; Float: left; Height: 30px; Width: 250px; Line-height: 30px; Margin-left: 20px; Text-align: right; } Dd. dishOn { Color: # CC0000; }

Haha because it was made with the dw style controller. This site's original article www.111cn.net/cssdiv/css.html