qartalonline
پنج شنبه 08 خرداد 1393, 23:09 عصر
اینم کدش:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<style type="text/css">
.row {
display: block;
position: relative;
}
.row:before, .row:after {
display: table;
content: " ";
}
.row, .row:after {
clear: both;
}
.right{
display: block;
float: right;
width: 50%;
}
.left{
display: block;
float: left;
width: 50%;
}
.right .box{
display: block;
border-left: 2px #ccc solid;
padding-left: 110px;
padding-bottom: 100px;
}
.left .box{
display: block;
border-right: 2px #ccc solid;
padding-right: 110px;
text-align: right;
padding-bottom: 100px;
}
.row img{
position: absolute;
display: block;
background: #ccc;
border: 4px #ccc solid;
border-radius: 50%;
height: 120px;
width: 120px;
left: 50%;
margin-left: -64px;
}
</style>
</head>
<body>
<div class="row">
<img alt="title" src="http://8pic.ir/images/03011560874535150767.png">
<div class="left">
<div class="box">
<h3>title title</h3>
<p>
test test test test test test test test test test test test
test test test test test test test test test test test test test test test
test test test test test test test test test
</p>
</div>
</div>
<div class="right"></div>
</div>
<div class="row">
<img alt="title" src="http://8pic.ir/images/03011560874535150767.png">
<div class="left"></div>
<div class="right">
<div class="box">
<h3>title title</h3>
<p>
test test test test test test test test test test test test
test test test test test test test test test test test test test test test
test test test test test test test test test
</p>
</div>
</div>
</div>
<div class="row">
<img alt="title" src="http://8pic.ir/images/03011560874535150767.png">
<div class="left">
<div class="box">
<h3>title title</h3>
<p>
test test test test test test test test test test test test
test test test test test test test test test test test test test test test
test test test test test test test test test
</p>
</div>
</div>
<div class="right"></div>
</div>
</body>
</html>