كيف يمكنني الاحتفاظ بعوامات CSS في سطر واحد؟

Question

أريد الحصول على عنصرين على نفس السطر باستخدام float: left للعنصر الموجود على اليسار.

ليس لدي أي مشاكل في تحقيق هذا بمفردي.المشكلة هي أنني أريد العنصرين يقضي على نفس الخط حتى عند تغيير حجم المتصفح صغيرًا جدًا.أنت تعرف...كما كان الحال مع الجداول.

الهدف هو منع العنصر الموجود على اليمين من الالتفاف بغض النظر.

كيف أخبر المتصفح باستخدام CSS أنني أفضل ذلك تمتد المحتوية div من لفه لذلك float: right; div موجود أسفل float: left; div?

ماذا اريد:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /

Answer 1

لف العائمة الخاصة بك <div>في حاوية <div> يستخدم هذا الاختراق ذو العرض الأدنى عبر المتصفحات:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

أنت يمكن تحتاج أيضًا إلى تعيين "التجاوز" ولكن ربما لا.

هذا يعمل بسبب:

• ال !important إعلان، جنبا إلى جنب مع min-width يجعل كل شيء يبقى على نفس الخط في IE7 +
• لا يتم تنفيذ IE6 min-width, ، ولكن لديه خطأ من هذا القبيل width: 100px يتجاوز !important الإعلان، مما يجعل عرض الحاوية 100 بكسل.

Answer 2

هناك خيار آخر، بدلاً من التعويم، وهو تعيين خاصية المسافة البيضاء nowrap إلى div الأصلي:

.parent {
     white-space: nowrap;
}

وأعد تعيين المسافة البيضاء واستخدم شاشة العرض المضمنة بحيث تظل divs على نفس السطر ولكن لا يزال بإمكانك منحها عرضًا.

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

هنا JSFiddle: https://jsfiddle.net/9g8ud31o/

Answer 3

قم بلف العوامات الخاصة بك في div مع الحد الأدنى للعرض أكبر من العرض المدمج + هامش العوامات.

لا حاجة للاختراق أو جداول HTML.

Answer 4

الحل 1:

العرض: خلية الجدول (غير مدعومة على نطاق واسع)

الحل 2:

الجداول

(أنا أكره الاختراقات.)

Answer 5

خيار اخر:لا تطفو العمود الأيمن الخاص بك؛فقط أعطه هامشًا أيسرًا لتحريكه إلى ما بعد التعويم.ستحتاج إلى اختراق أو اثنين لإصلاح IE6، ولكن هذه هي الفكرة الأساسية.

Answer 6

هل أنت متأكد من أن العناصر العائمة على مستوى الكتلة هي الحل الأفضل لهذه المشكلة؟

في كثير من الأحيان، مع صعوبات CSS في تجربتي، يتبين أن السبب وراء عدم قدرتي على رؤية طريقة للقيام بالشيء الذي أريده هو أنني وقعت في رؤية نفقية فيما يتعلق بالترميز الخاص بي (التفكير "كيف يمكنني إنشاء هؤلاء العناصر تفعل هذا؟" ) بدلاً من العودة والنظر إلى ما أحتاج إلى تحقيقه بالضبط وربما إعادة صياغة HTML الخاص بي قليلاً لتسهيل ذلك.

Answer 7

أوصي باستخدام الجداول لهذه المشكلة.أواجه مشكلة مماثلة وطالما تم استخدام الجدول فقط لعرض بعض البيانات وليس لتخطيط الصفحة الرئيسية فلا بأس.

Answer 8

أضف هذا السطر إلى محدد العناصر العائمة

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

سيمنع إضافة الحشو والحدود إلى العرض، لذلك يبقى العنصر دائمًا في الصف، حتى لو كان لديك على سبيل المثال.ثلاثة عناصر بعرض 33.33333%

Answer 9

عندما يقوم المستخدم بتقليل حجم النافذة أفقيًا ويؤدي ذلك إلى تكديس العوامات عموديًا، قم بإزالة العوامات وفي القسم الثاني (الذي كان عائمًا) استخدم الهامش العلوي:-123 بكسل (القيمة الخاصة بك) والهامش الأيسر:444 بكسل (القيمة الخاصة بك) لوضع divs كما ظهرت مع العوامات.عند القيام بهذه الطريقة، عندما تضيق النافذة، يظل القسم الأيمن في مكانه ويختفي عندما تكون الصفحة ضيقة جدًا بحيث لا يمكن تضمينها....وهو (بالنسبة لي) أفضل من "القفز" على الجانب الأيمن div أسفل القسم الأيسر عندما يقوم المستخدم بتضييق نافذة المتصفح.

Answer 10

كانت الطريقة التي تعاملت بها مع هذا هي استخدام بعض jQuery.السبب وراء قيامي بذلك بهذه الطريقة هو أن A وB كانا نسبة العرض.

لغة البرمجة:

<div class="floatNoWrap">
    <div id="A" style="float: left;">
        Content A
    </div>
    <div id="B" style="float: left;">
        Content B
    </div>
    <div style="clear: both;"></div>
</div>

CSS:

.floatNoWrap
{
    width: 100%;
    height: 100%;
}

مسج:

$("[class~='floatNoWrap']").each(function () {
    $(this).css("width", $(this).outerWidth());
});