قرار دادن سه باکس در یک ردیف
سلام دوستان من به مشکلی بر خورد کردم که هر کدی میزنم باکس هام در یک ردیف قرار نمیگره میشه لطف کنید راهنمایی کنید؟
<body>
<div class="header">
</div>
<div class="row">
<div id="center1">
<div class="center">
<div class="icon-man">
<div class="icon">
<i class="fas fa-lightbulb fa-2x"></i>
</div>
</div>
<div class="text">
<div class="my-txt">
<p>1. STRATEGY</p>
</div>
<div class="my-txt2">
<p> Sample text. Click to select the text box. Click again or double click to start editing the text. </p>
</div>
</div>
<div class="btn">
<a href="https://nicepage.com/c/testimonials-html-templates">MORE</a>
</div>
<div id="center1">
<div class="center">
<div class="icon-man">
<div class="icon">
<i class="fas fa-lightbulb fa-2x"></i>
</div>
</div>
<div class="text">
<div class="my-txt">
<p>1. STRATEGY</p>
</div>
<div class="my-txt2">
<p> Sample text. Click to select the text box. Click again or double click to start editing the text. </p>
</div>
</div>
<div class="btn">
<a href="https://nicepage.com/c/testimonials-html-templates">MORE</a>
</div>
<div id="center1">
<div class="center">
<div class="icon-man">
<div class="icon">
<i class="fas fa-lightbulb fa-2x"></i>
</div>
</div>
<div class="text">
<div class="my-txt">
<p>1. STRATEGY</p>
</div>
<div class="my-txt2">
<p> Sample text. Click to select the text box. Click again or double click to start editing the text. </p>
</div>
</div>
<div class="btn">
<a href="https://nicepage.com/c/testimonials-html-templates">MORE</a>
</div>
</div>
</div>
</div>
</body>
* { margin: 0; padding: 0; list-style: none; }
.header{
background-color: #f2f2f2;
width: 100%;
height: 80px;
}
.center{
background-color: #e5e5e5;
width: 300px;
height: 180px;
padding: 25px;
margin: 91px;
text-align: center;
float: left;
}
.icon-man{
background-color: #ec563d;
width: 70px;
height:70px;
border-radius: 100%;
margin: -15px;
}
.icon{
color: rgb(255, 250, 250);
}
.my-txt{
color: #000;
font-size: 18px;
font-weight: 700;
font-size: 1.125rem;
letter-spacing: 5px;
margin: -51px;
}
.my-txt2{
color: #000;
font-size: 18px;
margin: 60px 0 0;
padding: -14px 125px 37px 73px;
padding: 25px 50px;
}
.btn{
text-align: center;
text-decoration: none;
color: #000;
}
.btn a{
letter-spacing: 4px;
float: left;
color: #000;
}
.row{
display: flex;
flex-direction: row;
}
پاسخ‌ها
11
کدهاتون رو یادتون رفت قرار بدین.
راهکار ساده: از خصوصیت flexbox استفاده کنید.
https://www.w3schools.com/css/css3_flexbox.asp
بله قرار دادم
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
به جای float از نمایش flex استفاده کنید. کارتون بسیار ساده میشه.
منبعی که قرار دادم رو مطالعه کنید.
با استفاده از سیستم row و col بوت استرپ این کار بدون نیاز به نوشتن css انجام میشه ( فقط با چندتا کلاس ساده )
https://getbootstrap.com/docs/5.0/layout/grid
@msdabbagh
بدون نوشتن css؟
همون کلاس هایی که دارن استفاده میشن رو با css نوشتن دیگه.
@milad من انجام دادم ولی متاسافانه درست نشد
شما کدهای Html تون ایراد داره.
با چه ویرایشگر کدی دارید کدنویسی می کنید؟ شما یک سری از div رو باز کردید ولی نبستید.
بهمین خاطر کدهاتون دچار ایراد شدند.
پیشنهاد می کنم کلا روی مبانی کار کنید، ایرادات زیاد هستش.
یک دوره پروژه محور خوب رو تماشا کنید تا کلیات براتون بهتر جا بیفته.
دوره flexbox راکت رو هم تماشا کنید.
سلام وقتتون بخیر!
اگر از bootstrap استفاده می‌کنید می‌تونید به این صورت این قضیه رو هندل کنید.
<div class='row'>
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>البته کد بالا توی هر صفحه به هر اندازه ای ۳ تا قسمت درست می‌کنه که درست ترش اینه
<div class='row'>
<div class="col-12 col-lg">1</div>
<div class="col-12 col-lg">2</div>
<div class="col-12 col-lg">3</div>
</div>اگر هم میخوای فقط css کار کنی و یادبگیری باید از flex یا grid استفاده کنی به این صورت.
<div style="display: flex">
<div style="width: 33%">1</div>
<div style="width: 33%">2</div>
<div style="width: 33%">3</div>
</div><div style="display: grid;grid-column-gap: 1rem;grid-template-columns: auto auto auto;">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>دوتا راه حل آخر ریسپانسو نیستند باید خودت رعایت کنی.
@milad خیلی ممنون از راهنمایی تون درست شد
خواهش میکنم. سرزنده باشین 👌