مشکل در موقعیت های قالب

[asadpur22]

سلام دوستان
من تازه دارم شروع به کد نویسی سایت می کنم .
یه جایی مشکل برخوردم نمیتونم چطور درستش کنم .
ممنون میشم راهنماییم کنید


اینم قالبم (http://tempic.ir/demo/)
میخوام اون چهار تا خبر مثل این عکسه (http://uupload.ir/files/fa7p_asli_-_copy.jpg)بشه .

[asadpur22]

کسی نیست کمک کنه >؟

[amirali0079]

آین عکسا طولش زیاده طولش رو کم تر کن ببین چی میشه )width(

[asadpur22]

کدوم عکسا . من فقط می خوام چهارتا خبر مثل عکس نمونه کنار هم بیوفتن . .
یه ذره بیشتر راهنمایی میکنید
ممنونم

[H:Shojaei]

به عکسهایی که کنار همن float راست یا چپ بدین و همچنین جمع width همشون نباید بیشتر از اون width اون کادری که توش قرار میگیرن باشه اینطوری کنار هم میافتن...

[CodeNEvis111]

با سلام

با این کدها مشکلت حل میشه:



.box_wrapper {
margin: 0 auto;
max-width: 823px;
width: 100%;
}
.postbox {
padding: 5px;
margin: 85px 0px 10px 0;
float: left;
width: 24.9%;
box-sizing: border-box;
max-width: 100%;
overflow: hidden;
}
.picnews {
border: 1px solid #bbb;
background-color: #E0E0DF;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 3px;
}


.picnews img {
max-width: 100%;
max-height: 100%;
}
.boxkh {
direction: rtl;
/* float: right; */
width: 800px;
height: 100px;
background: rgba(0,0,0,0.2);
padding: 15px 10px;
margin: 0;
border-top: 4px solid #fff;
border-radius: 8px;
box-shadow: inset 0 0 0 7px rgba(255,255,255,.5);
position: absolute;
left: 50%;
margin-left: -415px;
margin-top: -80px;
}




به parent اون چهارتا باکس پایین (یعنی کلاس middle) یه کلاس اضافه بشه با این نام (box_wrapper)

استایل های مشابه قبلی حتما حذف بشه.

[amir868]

میتونی یه کار دیگه هم بکنی اونم اینکه تو کلاس middle این استایل رو بهش بدی:
.middle{
text-align: center;
}

بعد از اون توی کلاس postbox خاصیت float:right رو پاک کن و به جاش display:inline-block بده و یه width:200px ی هم بده
یه چیزای دیگه هم مینویسم که margin ه بهتری میشه:

.middle{
width: 1000px;
margin: 0px auto;
margin-top: 100px;
text-align: center;
}

.postbox {
background: #E0E0DF none repeat scroll 0% 0%;
border-radius: 5px;
padding: 10px;
border: 3px solid #FFF;
width: 200px;
display: inline-block;
margin: 10px;
text-align: right;
}