divs جنبًا إلى جنب مع شكل لا ينبغي أن ينكسر

Question

أريد أن أحصل على العديد من divs مع المحتوى جنبًا إلى جنب مثل

D1 D2 D3 D4 D5

D2 يحتوي على شكل. بدون النموذج الذي يعمل (باستخدام العرض: مضمّن ومثل). لا ينبغي أن يكون هناك فترات انقطاع في HTML الناتجة لأن هذا هو رأس الصفحة.

كيف يمكنني إنجاز ذلك؟

تحديث إليك الرمز الفعلي

<div id="sep">
  <img alt="separator" src="underline.jpg">
  <div id="block-search-0" class="block block-search">
     <div class="content" style="font-size: 11.52px;">
     <form id="search-block-form" method="post" accept-charset="UTF-8" action="/cms/admin/build/block">
       <div>
        <div class="container-inline">aaa</div>
       </div>
     </form>
    </div>
  </div>
  <div id="lang">
       <ul>
       <li class="fr first active"><a class="language-link active" href="/cms/admin/build/block">Français</a></li>
       <li class="en last active"><a class="language-link active" href="/cms/en/admin/build/block">English</a></li>
       </ul>
  </div>
  <div id="block-text_resize">
    <a id="text_resize_decrease" class="changer" href="javascript:;"><img alt="-" src="aSmall.gif"></a>
    <a id="text_resize_increase" class="changer" href="javascript:;"><img alt="+" src="aBig.gif"></a>
  </div>
  <div class="block-region">bla</div>
</div>

لاحظ أن كسر الأسطر كما هو موضح هنا قد لا يكون هو نفسه كما في الكود الفعلي. تمت إضافة بعض الفواصل هنا من أجل الوضوح.

Answer 1

<div id="sep">
<div class="floated_container"></div>
<div class="floated_container">
  <form></form>
</div>
<div class="floated_container"></div>
<div class="floated_container"></div>
</div>

#sep {overflow:hidden;}
.floated_container {float:left;}

تأكد من أن الحاويات المتداخلة الخاصة بك لا تتجاوز إجمالي عرض #SEP آخر سوف تلتف العوامات.

Answer 2

لست متأكدًا مما يحدث عندما تضع عنصر كتلة (نموذج) داخل عنصر مضمّن (عرض: مضمّن).

يمكنك ترك Div كعناصر كتلة وتطفو عليها مثل: على سبيل المثال:

#sep > div {
    float: left;
}

من الناحية الرسمية ، يجب عليك إعطاء العناصر العائمة عرضًا أيضًا ، لكنني لا أعرف ما إذا كان ذلك ضروريًا حقًا وإذا كان ذلك ممكنًا في وضعك.

Answer 3

تأكد من أن عرض النموذج يناسب الافتراض الذي تضعه فيه؟ استخدم مفتش Firebug للتحقق من ذلك.