PDA

View Full Version : مشكل كنار هم قرار نگرفتن عناصر وبسايت


Masoud Sj
جمعه 27 شهریور 1394, 19:24 عصر
سلام خسته نباشيد .
دوستان يه مشكلي دارم اميدوارم بتونيد بهم كمك كنيد:
من ميخام مثلا دوتا بلاك Div رو كنار هم قرار بدم با سي اس اس انجام اين كار با تكه كد display انجام ميشه.
خب من تا اينجاش مشكل ندارم يني دوتا بلاك كنار هم ميمونن...
ولي وقتي مثلا توي ي بلاك ي عكس يا متن ميزارم چند پيكسل ميره پايين ... هر كاري كردم درست عمل نكرد ، و تنها كاري ك ميتونم بكنم اينه ك توي هر دوتا بلاكم به اندازه ي هم پر كنم...
ي مثلا براتون ميزارم :
http://parsitemp.loxblog.com/page/testing
تو اين مثلا چهارتا بلاك گذاشتم تو دوتا بلاك اول چيزي نيست براي همين كنار هم موندن
ولي تو دوتاي پاييني توي يكي از بلاك ها ي متن هست برا همين اوني ك متن داره يكم پايين تر اومده :(
واقعا نميدونم چيكارش كنم...
ممنون ميشم كمك كنيد.
siros1983
شنبه 28 شهریور 1394, 01:19 صبح
شما میتونی بجای inline-block اینا float کنی و بعد اگه متن گذاشتی رفتن پایین بهشون position بدی
Mr.Robot666
یک شنبه 29 شهریور 1394, 10:23 صبح
فلوت دیگه مزخرف تره؛ فقط گاهی مستحبِ
جوابشو گرفتی به من هم بگو
لعنت؛ یجا پیدا نمیشه آدم جوابشو پیدا کنه

حالا جدا از سوال شما شما چرا اینا وسط افتادن؟ من استال مربوطه رو پیدا نکردم!
Mr.Robot666
یک شنبه 29 شهریور 1394, 10:43 صبح
باید به همه باکس هات vertical-align بدی
حالا مقدارش رو من هرچی میزارم فرقی نمیکنه !!!! بعد اگه بخوایم متن داخلش رو وسط باکس بنداریم چیکار کنیم؟!!!! :عصبانی++: فکر کنم فلکس این دردسر هارو نداره :متفکر:
پیام حیاتی
یک شنبه 29 شهریور 1394, 11:35 صبح
سلام
ما یک کلاس اصلی تعریف می کنید و بعد کلاس ها یا آی دهای باکس رو در کلاس اصلی قرار می دید،برای این کار یه نمونه قرار می دم.
کدهای html :


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<title>Box Learning</title>
</head>


<body>


<div class="main-box">
<div class="box-1">This is Test For Test <br />This is Test For Test</div>
<div class="box-2">This is Test For Test <br />This is Test For Test</div>
</div>


</body>
</html>




کدهای Css :


@charset "utf-8";
/* CSS Document */




.main-box
{
width:525px;
height:262px;
border:solid 1px #000000;
margin:0 auto;
color:#FFF;
font-weight:bold;


}

.box-1
{
width:250px;
height:250px;
background-color:#F00;
float:left;
border:solid 1px #FFF;
padding:5px;



}


.box-2
{
width:250px;
height:250px;
background-color:#F00;
float:left;
border:solid 1px #FFF;
padding:5px;

}




نتیجه :

135342

دریافت (http://joomlaforum.ir/upload/do.php?filename=joomlaforum.ir_14427356551.zip) فایل های تست.
موفق باشید.
Mr.Robot666
یک شنبه 29 شهریور 1394, 18:09 عصر
آغا بغیر از روش flex مابقی روش ها در شرایطی خاص کار میکنن

https://css-tricks.com/centering-css-complete-guide/
(https://css-tricks.com/centering-css-complete-guide/)
http://front-end.ir/ui/how-to-center-a-box-with-css/

http://www.majidonline.com/article/%D8%B1%D8%A7%D8%B2%D9%87%D8%A7%DB%8C_%D9%84%D8%A7% DB%8C%D9%87_%D8%A8%D9%86%D8%AF%DB%8C_%D8%B5%D9%81% D8%AD%D9%87_%D8%A8%D8%AF%D9%88%D9%86_%D8%A7%D8%B3% D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_Float.h tml

حالا چه کاریه، آخرش مجبور میشید از فلکس استفاده کنید! با چند خط کد خیالت راحت هرکاری میخای بکن باگ هم نمیده!
http://css-tricks.ir/%D8%B5%D9%81%D8%AD%D9%87-%D8%A2%D8%B1%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7-%D9%81%D9%84%DA%A9%D8%B3%D8%A8%D8%A7%DA%A9%D8%B3-flexbox/


تا این حد که بوت استرپ3 در مقابل فلکس کم اورد توی 4 خصوصیت های فلکس رو اضافه کرده!