This is a question that someone emailed today, the first idea is to use the UL list to achieve, but this is in the presence of two more troublesome places:
1, if the use of UL also layout, the right column more trouble;
2, text outside the border adaptive more trouble;
3, most likely to set the height of death;
So, a careful look at this layout, think about it or use DL.DT.DD is reasonable:
1, reasonable layout;
2, the future expansion is very convenient;
3, CSS must be very small;
Try to write, look at it is OK! Within the controllable range!
The layout of the cloth is of course needless to say:
Copy Code code as follows:
<div>
<dl>
<dt><a href= "HTTP://WWW.JB51.NET/ARTICLE/32" > blog article is written by myself! </a></dt>
<dd> Author: John </dd>
</dl>
<dl>
<dt><a href= "HTTP://WWW.JB51.NET/ARTICLE/32HTTP://WWW.JB51.NET/ARTICLE/32" > blog article is written by myself! </a></dt>
<dd> Author: John </dd>
</dl>
<dl>
<dt><a href= "HTTP://WWW.JB51.NET/ARTICLE/32HTTP://WWW.JB51.NET/ARTICLE/32" > blog article is written by myself! </a></dt>
<dd> Author: John </dd>
</dl> to the .....
</div>
CSS section:
Copy Code code as follows:
<style>
*{margin:0; padding:0;}
body{font-size:12px; line-height:1.8; padding:10px;}
Dl{clear:both; margin-bottom:5px;float:left;}
dt,dd{padding:2px 5px;float:left border:1px Solid #3366FF}
dd{position:absolute; right:5px;}
h1{clear:both;font-size:14px;}
</style>
Look at the effect:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <style> *{margin:0; padding:0;} body{font-size:12px; line-height:1.8; padding:10px;} Dl{clear:both; margin-bottom:5px;float:left;} dt,dd{padding:2px 5px;float:left border:1px Solid #3366FF} dd{position:absolute; right:5px; h1{clear:both;font-size:14px;} </style> </pead> <body> <p>test</p> <div> <dl> <dt> I'm a girl! The article in the blog is I wrote it myself! </dt> <dd>xxx</dd> </dl> <dl> <dt> I'm a girl! The article in the blog is I wrote it myself! </dt> <dd>xxx</dd> </dl> <dl> <dt> I'm a girl! The article in the blog is I wrote it myself! </dt> <dd>xxx</dd> </dl> <dl> <dt> I'm a girl! The article in the blog is I wrote it myself! </dt&gT <dd>xxx</dd> </dl> <dl> <dt> I'm a girl! The article in the blog is I wrote it myself! </dt> <dd>xxx</dd> </dl> <dl> <dt> I'm a girl! The article in the blog is I wrote it myself! </dt> <dd>xxx</dd> </dl> <dl> <dt> I'm a girl! The article in the blog is I wrote it myself! </dt> <dd>xxx</dd> </dl> </div> <p>test</p> <div> <DL&G T <dt>, I'm a girl! The article in the blog is I wrote it myself! </dt> <dd>xxx</dd> </dl> <dl> <dt> I'm a girl! The article in the blog is I wrote it myself! </dt> <dd>xxx</dd> </dl> <dl> <dt> I'm a girl! The article in the blog is I wrote it myself! </dt> <dd>xxx</dd> </dl> <dl> <dt> I'm a girl! The article in the blog is I wrote it myself! </dt> <dd>xxx</dd> </dl> <dl> <dt> I'm a girl! The article in the blog is I wrote it myself! </dt> <dd>xxx</dd> </dl> <dl> <dt> I'm a girl! The article in the blog is I wrote it myself! </dt> <dd>xxx</dd> </dl> <dl> <dt> I'm a girl! The article in the blog is I wrote it myself! </dt> <dd>xxx</dd> </dl> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
What if the deal is wide?
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <style> *{margin:0; padding:0;} body{font-size:12px; line-height:1.8; padding:10px;} Dl{clear:both margin-bottom:5px;float:left;width:100%} dt,dd{padding:2px 5px;float:left border:1px solid #3366FF} dd{float:right} h1{clear:both;font-size:14px;} div{width:500px; float:left;} </style> </pead> <body> <p> title </p> <div> <dl> <dt> Blog The article is my own It's written! </dt> <dd> Author: John </dd> </dl> <dl> <dt> Blog Article I wrote it myself! </dt> <dd> Author: John </dd> </dl> <dl> <dt> Blog Article I wrote it myself! </dt> <dd> Author: John </dd> </dl> <dl> <dt> Blog Article I wrote it myself! &lT;/dt> <dd> Author: John </dd> </dl> <dl> <dt> Blog Article I wrote it myself! </dt> <dd>xxx</dd> </dl> <dl> <dt> Blog Article I wrote it myself! </dt> <dd>xxx</dd> </dl> <dl> <dt> Blog Article I wrote it myself! </dt> <dd>xxx</dd> </dl> </div> <p> title </p> <div> <dl> <dt> Blog article is my own writing! </dt> <dd>xxx</dd> </dl> <dl> <dt> Blog Article I wrote it myself! </dt> <dd>xxx</dd> </dl> <dl> <dt> Blog Article I wrote it myself! </dt> <dd>xxx</dd> </dl> <dl> <dt> Blog Article I wrote it myself! </dt> <dd>xxx</dd> </dl> <dl> <dt> Blog Article I wrote it myself! </dt> <dd>xxx</dd> </dl> <dl> <dt> Blog Article I wrote it myself! </dt> <dd>xxx</dd>;/dl> <dl> <dt> Blog articles are written by myself! </dt> <dd>xxx</dd> </dl> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Related examples, I've written one before:
Current 1/2 page
12 Next read the full text
