قرار دادن سه باکس در یک ردیف
سلام دوستان من به مشکلی بر خورد کردم که هر کدی میزنم باکس هام در یک ردیف قرار نمیگره میشه لطف کنید راهنمایی کنید؟
<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;
}گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
کدهاتون رو یادتون رفت قرار بدین.
راهکار ساده: از خصوصیت flexbox استفاده کنید.
https://www.w3schools.com/css/css3_flexbox.asp
به جای float از نمایش flex استفاده کنید. کارتون بسیار ساده میشه.
منبعی که قرار دادم رو مطالعه کنید.
با استفاده از سیستم row و col بوت استرپ این کار بدون نیاز به نوشتن css انجام میشه ( فقط با چندتا کلاس ساده )
https://getbootstrap.com/docs/5.0/layout/grid
شما کدهای 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>دوتا راه حل آخر ریسپانسو نیستند باید خودت رعایت کنی.