اضافه کردن دو باکس زیر هم دیگر به صورت خودکار

[Mhnz 11]

با سلام،

با CSS یک کلاس ساختم به نام downloads که لینک دانلود فایل رو داره. حالا میخوام که زیر این باکس دانلود یک باکس دیگه بیاد به نام رمز عبور فایل و ...

چطور میتونم این کار رو انجام بدم؟

فقط میخوام از یک کلاس استفاده کنم.

کد CSS :

.downloads{
	border-radius:15px;
	background:transparent;
	border-color:red;
	border-width: 2px;
	border-style:solid;
	color:red;
}
.downloads:before{
	
	content:"";
	
}
.downloads:hover{
	
	
	background:red;
	color:white;
	
}

 

[asadiy4n 2807]

سلام حقیقتا چند بار خوندم ولی متوجه نشدم اگر میخواد 2 باکس جدا باشه که در HTML

<div class="download">
  <a href="">Download</a>
</div>
<div class="download_info">
  <p>Password: 123456</p>
</div>

و در css هم به هرکدام استایل جدا میدید

اگر میخواید با before یا after کار کنید

.download{
width:100%;
height:300px;
position:relative;
}
.download::after{
content:'password: 123456';
width:100%;
height:50px;
position: relative; /* absolute */
}

اگه position رو برابر absolute قرار بدید میشه بیشتر شخصی سازیش کرد و بهش شکل داد

[Mhnz 11]

در 30 دقیقه قبل، asadiy4n گفته است :

سلام حقیقتا چند بار خوندم ولی متوجه نشدم اگر میخواد 2 باکس جدا باشه که در HTML

<div class="download">
  <a href="">Download</a>
</div>
<div class="download_info">
  <p>Password: 123456</p>
</div>

و در css هم به هرکدام استایل جدا میدید

اگر میخواید با before یا after کار کنید

.download{
width:100%;
height:300px;
position:relative;
}
.download::after{
content:'password: 123456';
width:100%;
height:50px;
position: relative; /* absolute */
}

اگه position رو برابر absolute قرار بدید میشه بیشتر شخصی سازیش کرد و بهش شکل داد

خیلی ممنون ازتون

با اید کد هایی مه زحمت کشیدین دوتا باکس زیر هم قرار میگیره؟

[asadiy4n 2807]

خواهش میکنم

بله، هردو همین کار رو انجام میدن بتظر خودم از اولی استفاده کنید بهتره برای سفارشی کردنش دستتون بازتره