几个月前写的一个小的纯css布局，借鉴意义比较足，所以共享出来。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } .content { height: 200px; width: 400px; background: pink; margin: 0 auto; margin-top: 100px; position: relative; } .content-s { height: 50px; width: 50px; background: purple; position: absolute; left: 50%; margin-left: -25px; top: 50%; margin-top: -25px; } .c_1 { background: red; width: 20px; height: 20px; list-style: none; position: absolute; left: 0px; top: 50%; margin-top: -10px;
} .c_2 { background: black; width: 20px; height: 20px; list-style: none; position: absolute; right: 0px; top: 50%; margin-top: -10px; } </style> </head> <body> <div class="content"> <div class="content-s"> <li class="c_1"></li> <li class="c_2"></li> </div> <li class="c_1"></li> <li class="c_2"></li> </div>
</body> </html>
