• 0

كيف أضبط المحاذاة لعناصر div أُنشئت داخل php؟

أريد ضبط محاذاة عناصر div داخل صفين 'rows' :

<div class="row-fluid">        
     <?php

        foreach($role_array as $k =>$v)
        {
            if($k != "bookin_operator" && $k!= "production_manager" && $k != "client" && $k != "admin" )
            {

        ?>


                <div class="span6">  
                    <div class='control-group'>
                        <label for='<?php echo $k;  ?>' class='control-label'><?php  echo $v ;?></label>
                        <div class='controls'>
                            <select class='form-control' name='<?php echo $k;  ?>[]' id='<?php echo $k;  ?>' multiple='multiple' size='5'>
                                <?php

                                   foreach($all_datas[$k] as $datas ) 
                                   {

                                        $username = "{$datas->nickname}";

                                        echo "<option value='{$datas->id}'>{$username}</option>";
                                   }

                                ?>

                            </select>
                            <label for="<?php echo $k;  ?>" class="error" style="display:none"></label>
                        </div>
                    </div>                         
                </div> 

        <?php
            }

        } 

        ?> 
        </div>   

أريد إدراج 11 عنصر من div ذات class=span6 لكنها لا تظهر بالشكل الصحيح، أريدها على شكل صفين تظهر فيه عناصر div بشكل منظم، كيف أفعل ذلك؟

تمّ تعديل بواسطة Simoh

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

باستعمالك لإطار العمل Bootstrap أو أي نظام شبكي آخر 'system of grid'.

جرّب الكود التالي لضبط محاذاة الوسوم div:

.span6 {
    width: 49%;
    display: inline-block;
}

حيث أعطينا لـ width قيمة %49 بالنسبة المئوية حتى تُحسب بشكل أوتوماتيكي ومتناسب مع عرض الصف المحتوي للوسم div.

الخاصية display :inline-block لإظهار عناصر div على شكل خطي .

مثال:

.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21; 
}

CSS Layout - inline-block

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن