اذهب إلى المحتوى
  • 0

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

Simoh

السؤال

أريد ضبط محاذاة عناصر 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
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...