با سلام خدمت شما دوستان عزیز.
دوستان عزیز عکسی در زمینه پیوست کردم می خواستم بدونم در استایل بندی باید چی کار کنم که مطالب به صورت جعبه ای به صورتی که نا مرتب جاهای خالی را پر کنند و نمایش داده بشوند.
کد مربوطه و عکس پیوست شد.
همانطور می بینید اگر کد را به صورت html دخیره کنید و نگاه کنید می بینید پست های جعبه ای به صورت به همین ریخته نمایش داده میشوند و جاهای خالی رو پر نمی کنند! باید چی کار کنم که جاهای خالی به صورت اتومات پر شوند؟!با تشکر
به طور مثال کدنویسی به این صورت میشه:
دوستان عزیز عکسی در زمینه پیوست کردم می خواستم بدونم در استایل بندی باید چی کار کنم که مطالب به صورت جعبه ای به صورتی که نا مرتب جاهای خالی را پر کنند و نمایش داده بشوند.
کد مربوطه و عکس پیوست شد.
همانطور می بینید اگر کد را به صورت html دخیره کنید و نگاه کنید می بینید پست های جعبه ای به صورت به همین ریخته نمایش داده میشوند و جاهای خالی رو پر نمی کنند! باید چی کار کنم که جاهای خالی به صورت اتومات پر شوند؟!با تشکر
به طور مثال کدنویسی به این صورت میشه:
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{width:600px;margin:0 auto;direction:rtl;}
.allpost{margin-top:10px;}
.postbox{
float:right;
border:1px solid #c0c0c0;
box-shadow:1px 1px 5px #c0c0c0;
border-radius:4px;
width:150px;
height:100px;
margin:10px;
}
.postbox1{
float:right;
border:1px solid #c0c0c0;
box-shadow:1px 1px 5px #c0c0c0;
border-radius:4px;
width:150px;
height:130px;
margin:10px;
}
.postbox2{
float:right;
border:1px solid #c0c0c0;
box-shadow:1px 1px 5px #c0c0c0;
border-radius:4px;
width:150px;
height:110px;
margin:10px;
}
.postbox3{
float:right;
border:1px solid #c0c0c0;
box-shadow:1px 1px 5px #c0c0c0;
border-radius:4px;
width:150px;
height:150px;
margin:10px;
}
.postbox4{
float:right;
border:1px solid #c0c0c0;
box-shadow:1px 1px 5px #c0c0c0;
border-radius:4px;
width:150px;
height:200px;
margin:10px;
}
.postbox5{
float:right;
border:1px solid #c0c0c0;
box-shadow:1px 1px 5px #c0c0c0;
border-radius:4px;
width:150px;
height:160px;
margin:10px;
}
.postbox6{
float:right;
border:1px solid #c0c0c0;
box-shadow:1px 1px 5px #c0c0c0;
border-radius:4px;
width:150px;
height:190px;
margin:10px;
}
</style>
</head>
<body>
<div class="allpost">
<div class="postbox">مطالب</div>
<div class="postbox1">مطالب</div>
<div class="postbox2">مطالب</div>
<div class="postbox3">مطالب</div>
<div class="postbox4">مطالب</div>
<div class="postbox5">مطالب</div>
<div class="postbox6">مطالب</div>
</div>
</body>
</html>
You must be registered for see images attach
لینک ها تنها برای اعضای سایت قابل نمایش است.
