رفتن به مطلب

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


پست های پیشنهاد شده

با سلام،

با 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;
	
}

 

لینک به ارسال

سلام حقیقتا چند بار خوندم ولی متوجه نشدم اگر میخواد 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 قرار بدید میشه بیشتر شخصی سازیش کرد و بهش شکل داد

لینک به ارسال
در 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 قرار بدید میشه بیشتر شخصی سازیش کرد و بهش شکل داد

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

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

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...