मैं सीएसएस फ्लोट्स को एक पंक्ति में कैसे रख सकता हूं?

216

मैं float: leftबाईं ओर आइटम का उपयोग करके एक ही पंक्ति में दो आइटम रखना चाहता हूं ।

मुझे इसे प्राप्त करने में कोई समस्या नहीं है। समस्या यह है, मैं चाहता हूं कि जब आप ब्राउज़र को बहुत छोटा करते हैं, तब भी दो आइटम एक ही पंक्ति पर रहें । आप जानते हैं ... जैसे कि यह तालिकाओं के साथ कैसा था।

लक्ष्य किसी भी चीज़ को लपेटने से अधिकार पर रखना है ।

मैं सीएसएस का उपयोग करने वाले ब्राउज़र को कैसे बताऊं कि मैं इसे लपेटने की तुलना में युक्त को खींचdiv दूंगा ताकि float: right;div नीचे हो float: left; div?

मैं क्या चाहता हूँ:

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

— Jiaaro
स्रोत

54

यह कितना अच्छा होगा यदि StackOverlow ने थोड़ा ड्राइंग विजेट जोड़ा ताकि हम माउस से इन आरेखों को बना सकें? डिज़ाइन-उन्मुख SE साइटों के लिए अधिक उपयुक्त हो सकता है ... लेकिन यह बहुत बढ़िया होगा।

— जोकूल

5

@JoeCool UX SE साइट में वास्तव में पहले से ही मॉकअप बनाने के लिए एक उपकरण है। meta.ux.stackexchange.com/questions/1291/…

— फ्रैंक हंडर

77

अपने फ़्लोटिंग <div>s को उस कंटेनर में लपेटें <div>जो इस क्रॉस-ब्राउज़र मिन-चौड़ाई हैक का उपयोग करता है:

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

आपको "अतिप्रवाह" सेट करने की भी आवश्यकता हो सकती है लेकिन शायद नहीं।

यह काम करता है क्योंकि:

!importantघोषणा, के साथ संयुक्त min-widthकारण सब कुछ IE7 + में एक ही लाइन पर रहने के लिए
IE6 कार्यान्वित नहीं करता है min-width, लेकिन इसमें एक बग ऐसा है width: 100pxजो !importantघोषणा को ओवरराइड करता है , जिससे कंटेनर की चौड़ाई 100px हो जाती है।

— एरिक वेंडेलिन
स्रोत

यह दो फ़्लोट के लिए महान काम करता है, लेकिन तीन नहीं। क्या यह तीन के लिए काम कर सकता है ??

— tylerthemiler

15

एकमात्र समस्या यह है कि यह एक निश्चित न्यूनतम चौड़ाई को बाध्य करती है।

— मैट मोंटाग

6

यह एक समाधान नहीं है, यह सिर्फ एक मिनट-चौड़ाई है, जब आपकी सामग्री वास्तव में छोटी हो जाती है (प्रश्न देखें) तो 100px से नीचे आपके पास एक ही मुद्दा है। विशेष रूप से टेबल कोशिकाओं के साथ, यह एक मुद्दा है।

— Sanne

बिल्कुल चौंकाने वाला - मेरी समस्या को तुरंत हल कर दिया। मैं एक साधारण दो कॉलम बूटस्ट्रैप लेआउट में इस समस्या से जूझ रहा हूं, जिसमें मैं नाम से अधिक बॉक्स हैक कर सकता हूं, लेकिन यह पूरी तरह से काम करता है। यह स्पष्टीकरण देने के लिए धन्यवाद कि यह काम क्यों - आकर्षक सामान, डोम है।

— nocarrier

यह divs के साथ काम कर सकता है, लेकिन मैंने इसे उल / ली के साथ परीक्षण किया है और यह काम नहीं करता है :(

— AsGoodAsItGets

132

एक अन्य विकल्प यह है कि फ्लोटिंग के बजाय, व्हाइट-स्पेस प्रॉपर्टी को सेट करने के लिए पैरेंट डिव को:

.parent {
     white-space: nowrap;
}

और सफेद-स्थान को रीसेट करें और इनलाइन-ब्लॉक डिस्प्ले का उपयोग करें ताकि div एक ही लाइन पर रहें लेकिन आप फिर भी इसे एक चौड़ाई दे सकते हैं।

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

यहाँ एक JSField है: https://jsfiddle.net/9g8ud31o/

— Innovaat
स्रोत

4

निश्चित रूप से सबसे अच्छा समाधान मैंने देखा है। यह मेरे उपयोग के मामले के लिए काम करता है लेकिन मुझे आश्चर्य है कि यह कितनी अच्छी तरह से समर्थित है। सौभाग्य से EVERYTHING के लिए फ्लोट्स का उपयोग करना धीरे-धीरे अतीत की बात बन गया है।

— रयान ओर

1

क्या आप बता सकते हैं कि यह कैसे काम करता है? या किसी भी लिंक कम से कम?

— अनिरुद्धन J

4

@ अनिरुद्धन यह बहुत मुश्किल नहीं है। इनलाइन-ब्लॉक तत्वों को इनलाइन टेक्स्ट के साथ सामान्य रूप से प्रवाहित करता है (लेकिन ब्लॉक के कुछ पैडिंग / मार्जिन क्षमताओं को बरकरार रखता है), और आप शाब्दिक रूप से सिर्फ सीएसएस को टेक्स्ट को व्हाइट-स्पेस के साथ लपेटने के लिए नहीं कहते हैं: नॉरप ऑप्शन (सामान्य) "फिर से बच्चे के लिए, यह सब कुछ नीचे प्रचार से बचने के लिए)

— ब्रायन

यद्यपि आप स्क्रीन के दाईं ओर फ्लोट करने के अधिकार पर div कैसे प्राप्त करते हैं? यह सिर्फ एक-दूसरे के बगल में दो इनलाइन-ब्लॉक डालता है जो लाइन ब्रेक नहीं करेंगे।

— AddMitt

आप इनलाइन-ब्लॉक तत्वों के बीच के स्थान को हटाने के लिए पत्र-रिक्ति: -3px (या जो कुछ भी आपके लिए काम करता है) का उपयोग कर सकते हैं। पुनश्च: स्वीकृत उत्तर से बेहतर ;

— क्लाउडीयू

15

फ्लोटर्स की संयुक्त चौड़ाई + मार्जिन की तुलना में न्यूनतम-चौड़ाई के साथ एक div में अपने फ्लोटर्स लपेटें।

कोई हैक या HTML तालिकाओं की जरूरत नहीं है।

— ज़ार
स्रोत

10

समाधान 1:

प्रदर्शन: टेबल-सेल (व्यापक रूप से समर्थित नहीं)

समाधान 2:

टेबल

(मुझे हैक्स से नफरत है।)

— pkario
स्रोत

8

एक अन्य विकल्प: अपने दाहिने कॉलम को फ्लोट न करें; बस इसे फ्लोट से परे ले जाने के लिए एक बाएं मार्जिन दें। IE6 को ठीक करने के लिए आपको एक हैक या दो की आवश्यकता होगी, लेकिन यह मूल विचार है।

— स्टीव क्ले
स्रोत

4

क्या आप सुनिश्चित हैं कि फ्लोट किए गए ब्लॉक-स्तरीय तत्व इस समस्या का सबसे अच्छा समाधान हैं?

मेरे अनुभव में सीएसएस कठिनाइयों के साथ अक्सर यह पता चला है कि कारण मैं बात मैं चाहता हूँ करने का एक तरीका नहीं देख सकते हैं कि मैं अपने मार्कअप (सोच "मैं कैसे कर सकते हैं के संबंध में एक सुरंग दृष्टि में पकड़ा गया है इन तत्व ऐसा करते हैं ? ") वापस जाने के बजाय और यह देखने के लिए कि वास्तव में मुझे क्या हासिल करना है और शायद इसे हल करने के लिए अपने html को थोड़ा मेहनत करना चाहिए।

— glenatron
स्रोत

अच्छी तरह से यह सब कुछ के बारे में काम करता है और मौजूदा लेआउट इस पर आधारित है, मैं सिर्फ लेआउट को तोड़ने के साथ एक समस्या को ठीक करने की कोशिश कर रहा हूं जब आप पाठ का आकार बढ़ाते हैं या ब्राउज़र विंडो को छोटा करते हैं जो 700px से अधिक चौड़ी होती है

— जियारो

2

मैं इस समस्या के लिए तालिकाओं का उपयोग करने की सलाह दूंगा। मैं एक समान मुद्दा रहा हूं और जब तक तालिका का उपयोग केवल कुछ डेटा को प्रदर्शित करने के लिए किया जाता है न कि मुख्य पृष्ठ लेआउट के लिए यह ठीक है।

— रोब इलियट
स्रोत

2

इस लाइन को अपने फ्लोटेड एलिमेंट सेलेक्टर में जोड़ें

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

यह चौड़ाई में पैडिंग और सीमाओं को जोड़ने से रोकेगा, इसलिए तत्व हमेशा पंक्ति में रहें, भले ही आपके पास उदाहरण हो। 33.33333% की चौड़ाई के साथ तीन तत्व

— Nebojsha
स्रोत

0

जब उपयोगकर्ता विंडो के आकार को क्षैतिज रूप से कम कर देता है और इसके कारण फ्लोट खड़ी हो जाती है, तो फ़्लोट को हटा दें और दूसरी div (जो एक फ्लोट थी) का उपयोग करें मार्जिन-टॉप: -123px (आपका मान) और मार्जिन-लेफ्ट: 444px (आपका मान) फ़्लोट के साथ दिखाई देने वाले divs को स्थिति दें। जब इस तरह से किया जाता है, जब खिड़की संकरी हो जाती है, तो दाईं ओर की div जगह पर रहती है और गायब हो जाती है जब पृष्ठ इसे शामिल करने के लिए बहुत संकीर्ण होता है। ... जो (मेरे लिए) दाएं-साइड डिव "जंप" से बेहतर है कि उपयोगकर्ता द्वारा ब्राउज़र विंडो को संकुचित करने पर बाईं ओर के नीचे "जंप" करें।

— ब्रूस एलन
स्रोत

-3

जिस तरह से मुझे इसके आसपास मिला वह कुछ jQuery का उपयोग करना था। मैंने इसे इस तरह से किया क्योंकि ए और बी प्रतिशत चौड़ाई थे।

HTML:

<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>

सीएसएस:

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

jQuery:

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

— ScubaSteve
स्रोत

1

सीएसएस के लिए एक रूपरेखा? मेरे पास सभी जावास्क्रिप्ट खोजों के लिए -jquery है और गुणवत्ता के लिए पूरी तरह से उपेक्षा के कारण हमें स्पष्ट रूप से CSS -jquery के लिए भी खोज शुरू करनी होगी? इसे सही करें या बिल्कुल न करें।

— जॉन