آموزش های این وب سایت به صورت رایگان در دسترس است. اطلاعات بیشتر
بروز خطا
   [message]
اشتراک در سوال
رای ها
[dataList]

ایراد در دیزاین دو div کنار هم

Arshazm  8 سال پیش  8 سال پیش
0 0

سلام

درحال نوشتن پروژه ای هستم.

دو تا div دارم و اینا کنار هم دیگه قرار دارن؛اینجوری:

اینم کدش:

 
<div class="header-wrapper" id="myHeader" style="display: block">
 <a href="login.html" class="btn-pink btn-head">ورود</a>
 <a href="signup.html" class="btn-pink btn-head">ثبت نام</a>
 <span class="btn-green btn-head nav">|||</span>
</div>

<div id="background-hide">
 <div class="row-white" id="learn-back">
 مثلا یه چیزی!
 </div>
 <div class="row-white" id="other-back">
 <div class="other-film">
 <img style="width: 100%;height: auto" src="22.jpg">
 </div>
 </div>
</div>

 

مشکل اینه که وقتی توی div سمت چپی یا راستی یه عکس قرار میدم اونیکی میاد با قسمت پایین اون تگ همتراز میشه؛اینجوی:

من میخوام اون div تیره رنگ margin-top ش نسبت به اون قسمت قرمز 0 باشه.در آخر هم کد css رو قرار میدم.پیشاپیش ممنون.

 
body{
 background-image: url('F:/projects/asanBedan/image/cover/cover.jpg');
 background-repeat: no-repeat;
 background-size: cover;
 direction: rtl;
}
#background-hide{
 width: 70%;
 margin: 1% auto;
 text-align: center;
 background-color: #df4e4e;
 height: 10%;
}
#learn-back{
 display: inline-block;
 margin: 1%;
 width: 65%;
 background-color: #2f3238;
}
#other-back{
 display: inline-block;
 margin: 1%;
 width: 30%;
 padding: .1em;
 background-color: #818497;
}
.other-film{
 width: 100%;
 text-align: center;
 margin-top: .1em;
 background-color: #e6e6e6;
}
 برای این سوال 2 پاسخ وجود دارد. مشاهده پاسخ صحیح
پاسخ به سوال 
ashiyanehamid  8 سال پیش
0 0

دوست عزیز من تست کردم مشکل شما اینه که از position ها استفاده نکردین. فقط کافیه other-back و other-film رو به این صورت تغییر بدین

#other-back{
 display: inline-block;
 width: 30%;
 padding: .1em;
 background-color: #818497;
 position:relative;
} 

.other-film{
 width: 100%;
 text-align: center;
 background-color: #e6e6e6;
 position:absolute;
 top:0;
}

یعنی شما به کلاس پدر position:relative بدین تا کلاس فرزندش که حالا position:absolute گرفته، بیاد و خودش رو نسبت به پدرش تنظیم کنه. چطوری؟ کافیه به فرزند top و left و right و bottom بدین که در اینجا ما به فرزندش top:0 دادیم که چیزیه که شما میخواستین. از float هم میشه استفاده کرد فکر کنم.

0 0
جناب اکبرنژاد ، سلام .مشکل این کدی که شما جایگزین کردید این هستش که المنت در بر گیرنده(که با رنگ قرمز در عکس مشخص شده) بعد جایگزینی این کد دیگه کل فضایی که دوتا المنت داخلی میگیرن رو پوشش نمیده.اما باز هم ممنون ، کارم رو پیش میبره. (8 سال پیش)
پاسخ به سوال 
ashiyanehamid  8 سال پیش
+1 0
 پاسخ صحیح

سلام آقای عظیمی عزیز. حق با شماست. من تغییراتی رو در کدها دادم و همون طور که در پاسخ اول گفتم از float هم میشه استفاده کرد و من در پاسخ دوم از این روش استفاده کردم. امیدوارم جوابتون همون چیزی باشه که من فکر میکردم. موفق باشد.

 <html>
<head>
<title>
</title>

<style>

body{
 background-image: url('F:/projects/asanBedan/image/cover/cover.jpg');
 background-repeat: no-repeat;
 background-size: cover;
 direction: rtl;
}
#background-hide{
 width: 70%;
 margin: 1% auto;
 text-align: center;
 background-color: red;
 height: auto;
}
#learn-back{
 float: right;
 margin: 1%;
 width: 65%;
 background-color: #2f3238;
}
#other-back{
 display: inline-block;
 margin: 1%;
 width: 30%;
 padding: .1em;
 background-color: #818497;
}
.other-film{
 width: 100%;
 text-align: center;
 margin-top: .1em;
 background-color: #e6e6e6;
}

</style>

</head>

<body>
<div class="header-wrapper" id="myHeader" style="display: block">
<a href="login.html" class="btn-pink btn-head"> login</a>
<a href="signup.html" class="btn-pink btn-head">

ثبت نام

</a>
<span class="btn-green btn-head nav">

|||
</span>
</div>

<div id="background-hide">
    <div class="row-white" id="learn-back">
        something
    </div>
    <div class="row-white" id="other-back">
    <div class="other-film">
    <img style="width: 100%;height: auto;" src="22.jpg">
    <img style="width: 100%;height: auto;" src="22.jpg">
    <img style="width: 100%;height: auto;" src="22.jpg">
    <img style="width: 100%;height: auto;" src="22.jpg">
</div>
</div>
</div>
</body>
</html>
0 0
آقای اکبرنژاد ممنون از وقتی که برای حل مشکل صرف کردید.مشکل حل شد .راه حل شما درست بود.همیشه موفق باشید... (8 سال پیش)
0 0
خواهش میکنم دوست عزیز. اینجور موقع‌ها از دکمه لایک استفاده کنین کافیه :) (8 سال پیش)
پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .