“无依赖绝对定位”与超越常规布局的排版

HTML

<div class="regist-box">
    <div class="regist-group">
        <label class="regist-label"><span class="regist-star">*</span>邮箱</label>
        <div class="regist-cell">
            <input type="email" class="regist-input"><span class="regist-remark regist-warn">
                <i class="icon-warn"></i>邮箱格式不准确（示意）
            </span>
        </div>
    </div>
    <div class="regist-group">
        <label class="regist-label"><span class="regist-star">*</span>密码</label>
        <div class="regist-cell">
            <input type="password" class="regist-input"><span class="regist-remark">
                请输入6-16位密码，不能使用空格
            </span>
        </div>
    </div>
    <div class="regist-group">
        <label class="regist-label">手机号码</label>
        <div class="regist-cell">
            <input type="tel" class="regist-input">
        </div>
    </div>
    <div class="regist-group">
        <i class="regist-label"></i>
        <div class="regist-cell">
            <a href="javascript:" class="regist-btn">立即注册</a>
        </div>
    </div>
</div>


					    

CSS

.regist-box { width: 346px; margin-left: auto; margin-right: auto; padding: 30px 0; }
.regist-group { margin: 20px 0; overflow: hidden; }
.regist-label { width: 70px; padding-top: 10px; float: left; }
.regist-cell { display: table-cell; *display: inline-block; }
.regist-input { height: 20px; line-height: 20px; width: 260px; padding: 9px 5px; border: 1px solid #d0d6d9; vertical-align: top; }
.regist-input:focus { border-color: #8DB2EB; outline: none;}
.regist-input:focus + .regist-remark,
.focus + .regist-remark { visibility: visible; }
.regist-btn { display: block; width: 160px; line-height: 40px; background-color: #be0000; color: #fff; text-align: center; text-decoration: none; }
.regist-btn:hover { background-color: #b00; }
.icon-warn {  position: absolute; margin-left: -18px; width: 16px; height: 20px; background: url(/images/6/warn.gif) no-repeat center; }

.regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; }
.regist-remark { position: absolute; margin: 10px 0 0 10px; color: #666; visibility: hidden; }
.regist-warn { padding-left: 16px; color: #be0000; }

					    

JS

//no