L42y/index.html

## index.html
<html>
    <head>
        <title>gist</title>
    </head>

    <body>
        <div class="clearfix">
            <div class="l">
                <img src="//placehold.it/200"/>

                <article class="info">
                    <header class="clearfix">
                        <h1 class="l">马龙</h1>

                        <span class="r">广东 佛山</span>
                    </header>

                    <div class="detail">
                        <p>
                            bla bla
                        </p>
                    </div>

                    <a class="btn" href="#"></a>
                </article>
            </div>

            <div class="r">
                <dl class="clearfix">
                    <dt>已绑定账号</dt>
                    <dd>
                        <a href="#"></a>
                    </dd>
                    <dd>
                        <a href="#"></a>
                    </dd>
                    <dd>
                        <a href="#"></a>
                    </dd>
                    <dd>
                        <a href="#"></a>
                    </dd>
                    <dd>
                        <a href="#"></a>
                    </dd>
                </dl>
            </div>
        </div>
    </body>
</html>

## style.scss
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

body {
    width:960px;
    margin:0 auto;
}

.clearfix {
    .l {
        float: left;
    }

    .r {
        float: right;
    }
}

.info {
    width: 400px;
    position: relative;
    margin-left: 220px;

    .address {
        top: 0;
        right: 0;
        position: absolute;
    }
}

.services {
    dd {
        float:left;
    }

    a {
        width:44px;
        height:44px;
        float: left;
        display: block;
        background:#000;
    }
}
	<html>
	<head>
	<title>gist</title>
	</head>

	<body>
	<div class="clearfix">
	<div class="l">
	<img src="//placehold.it/200"/>

	<article class="info">
	<header class="clearfix">
	<h1 class="l">马龙</h1>

	<span class="r">广东佛山</span>
	</header>

	<div class="detail">
	<p>
	bla bla
	</p>
	</div>

	<a class="btn" href="#"></a>
	</article>
	</div>

	<div class="r">
	<dl class="clearfix">
	<dt>已绑定账号</dt>
	<dd>
	<a href="#"></a>
	</dd>
	<dd>
	<a href="#"></a>
	</dd>
	<dd>
	<a href="#"></a>
	</dd>
	<dd>
	<a href="#"></a>
	</dd>
	<dd>
	<a href="#"></a>
	</dd>
	</dl>
	</div>
	</div>
	</body>
	</html>
	.clearfix:before, .clearfix:after { content: ""; display: table; }
	.clearfix:after { clear: both; }
	.clearfix { *zoom: 1; }

	body {
	width:960px;
	margin:0 auto;
	}

	.clearfix {
	.l {
	float: left;
	}

	.r {
	float: right;
	}
	}

	.info {
	width: 400px;
	position: relative;
	margin-left: 220px;

	.address {
	top: 0;
	right: 0;
	position: absolute;
	}
	}

	.services {
	dd {
	float:left;
	}

	a {
	width:44px;
	height:44px;
	float: left;
	display: block;
	background:#000;
	}
	}