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

السؤال

نشر (معدل)

أريد ضبط محاذاة عناصر 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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...