Teach you the most common CSS solution for front-end small module layout, compatible with ie8.0 7.0 6.0 firefox3.5 2.0 Google Oprea Apple browser, etc.

Although I am working in the background, sometimes it is inevitable to do some front-end, the most commonly designed module layout, such

When we used table layout, it was easy to say
However, with the advent of web and the use of CSS layout, it is still difficult to use it. For a long time, I have been using float to locate the "more" span, which makes browser compatibility difficult to call.
The structure is as follows:
<Div class = "Block">
<Ul>
<Li> <H4> title <H4> <SPAN class = "more"> more <span> <li>
</Ul>
<Div class = "content"> content </div>
</Div>

Today, I am opening a site for a foreigner.Source codeWe found an optimal solution.
StructureCodeAs follows:

< Div Class = "Box" >
< H4 > Title </ H4 >
< DL Class = "Title" >
< Dd > More </ Dd >
</ DL >
< Div Class = "Content" >
Content
</ Div >
</ Div >

CSS code: 1 * { Margin : 0 ; Padding : 0 ; }
2 . Box { Width : 200px ; Position : Relative ; }
3 . Box h4 { Height : 26px ; Background : # F00 ; Line-height : 25px ; }
4 . Title { Position : Absolute ; Top : 1px ; Right : 3px ; Line-height : 25px ; }
5 . Content { Border : 1px solid # ccdff2 ; Overflow : Hidden ; }

Note that * {margin: 0; padding: 0;} is required, and the position: relative of the box is required. Otherwise, a problem occurs when you absolutely locate "more ".
In this way, we need to build such a small module. As long as we copy and modify it, we can also use a beautiful background image on H4.
I have beautified the picture;

Not bad, huh ???