یلدا ادامه داره... ❤️ ۴۰ درصد تخفیف همه دوره‌ها

استفاده از تخفیف‌ها
ثانیه
دقیقه
ساعت
روز
softwar
4 سال پیش توسط softwar مطرح شد
11 پاسخ

قرار دادن سه باکس در یک ردیف

سلام دوستان من به مشکلی بر خورد کردم که هر کدی میزنم باکس هام در یک ردیف قرار نمیگره میشه لطف کنید راهنمایی کنید؟


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

ثبت پرسش جدید
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش آپدیت شد
0

کدهاتون رو یادتون رفت قرار بدین.
راهکار ساده: از خصوصیت flexbox استفاده کنید.
https://www.w3schools.com/css/css3_flexbox.asp


softwar
@mrsoftwarr 4 سال پیش مطرح شد
0

بله قرار دادم


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

به جای float از نمایش flex استفاده کنید. کارتون بسیار ساده میشه.
منبعی که قرار دادم رو مطالعه کنید.


محمدسجاد دباغ
تخصص : برنامه نویس لاراول
@mdabbagh 4 سال پیش مطرح شد
0

با استفاده از سیستم row و col بوت استرپ این کار بدون نیاز به نوشتن css انجام میشه ( فقط با چندتا کلاس ساده )
https://getbootstrap.com/docs/5.0/layout/grid


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

@msdabbagh
بدون نوشتن css؟
همون کلاس هایی که دارن استفاده میشن رو با css نوشتن دیگه.


softwar
@mrsoftwarr 4 سال پیش مطرح شد
0

@milad من انجام دادم ولی متاسافانه درست نشد


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

شما کدهای Html تون ایراد داره.
با چه ویرایشگر کدی دارید کدنویسی می کنید؟ شما یک سری از div رو باز کردید ولی نبستید.
بهمین خاطر کدهاتون دچار ایراد شدند.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

پیشنهاد می کنم کلا روی مبانی کار کنید، ایرادات زیاد هستش.
یک دوره پروژه محور خوب رو تماشا کنید تا کلیات براتون بهتر جا بیفته.
دوره flexbox راکت رو هم تماشا کنید.


رضا پارسیان
تخصص : توسعه دهنده Php , Laravel
@Rp76 4 سال پیش آپدیت شد
1

سلام وقتتون بخیر!
اگر از 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>

دوتا راه حل آخر ریسپانسو نیستند باید خودت رعایت کنی.


softwar
@mrsoftwarr 4 سال پیش مطرح شد
0

@milad خیلی ممنون از راهنمایی تون درست شد


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

خواهش میکنم. سرزنده باشین 👌


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام