सीएसएस: इनलाइन सभी तत्वों को पहली पंक्ति पर फिट, प्रत्येक अगले तत्व

Question

कोई जावास्क्रिप्ट और कोई स्क्रीन चौड़ाई मीडिया प्रश्नों

मैं एक सीएसएस-केवल तरह से स्थिति को प्राप्त करने को खोजने के लिए कोशिश कर रहा हूँ के बाद लाइन ब्रेक नीचे छवि में चित्रित। चर चौड़ाई के साथ

• ब्लॉक के एक लाइन (इनलाइन ब्लॉक या जारी ब्लॉक) पंक्ति के दाईं ओर गठबंधन नाव का उपयोग कर,: सही है या सही पाठ संरेखित
मैं निम्नलिखित बनाने के लिए एक तरह से नहीं मिल सका
• तत्व जो रेखा पर फिट नहीं होते हैं, अगली पंक्ति में लपेटें। पहली पंक्ति के बाद सभी तत्वों की अपनी रेखा होती है।

मैं कई रणनीतियों के साथ प्रयोग नहीं कर रहा हूं, मुझे कोई एहसास नहीं है कि फ्लेक्सबॉक्स मदद कर सकता है लेकिन मुझे फ्लेक्सबॉक्स के साथ बहुत अनुभवी नहीं है और इसका उपयोग करने का कोई तरीका नहीं मिला।

---

कुछ बातें है कि मैं कोशिश की है:

1. कोशिश एक में तत्वों 'सामग्री डालने के लिए: छद्म तत्व से पहले, का उपयोग कर सामग्री: attr (डेटा-सामग्री)। तत्व के पास कोई चौड़ाई नहीं होगी। अगली पंक्ति पर 99.9% की चौड़ाई वाला एक बाएं फ्लोटिंग तत्व होगा जो प्रत्येक तत्व को अगली पंक्ति पर धक्का देगा। इसके साथ समस्या यह है कि पहली पंक्ति के तत्वों को अपनी सामान्य चौड़ाई बनाए रखना चाहिए और मुझे ऐसा करने का कोई तरीका नहीं मिला। : प्रथम-पंक्ति छद्म चयनकर्ता लाइन पर शब्दों तक ही सीमित है और लाइन
2. पर इनलाइन कंटेनरों के लिए काम नहीं करता है उपर्युक्त विधि के लिए वैकल्पिक: यह भी जोड़ें: छद्म तत्वों के बाद जो पूरी तरह से स्थित हैं और समान सामग्री है : befores। : तत्वों से पहले केवल पहली पंक्ति पर दिखाया जाएगा और लपेट नहीं होगा, तत्वों के बाद दाईं ओर लंबवत सूची बन जाएगी। इसके साथ ही मैं एक मृत अंत में चला गया।

---

अद्यतन: मैं एक (कम) बेला काम करता है कि जब तत्वों 'चौड़ाई तय की और बराबर कर रहे हैं बनाया है। दुर्भाग्य से निश्चित चौड़ाई, इसलिए अभी तक मैं क्या हासिल करना चाहता हूं। यदि आप मेरी मदद करना चाहते हैं तो आप शायद इसे शुरुआती बिंदु के रूप में उपयोग कर सकते हैं। मैंने सामग्री को एक में रखा: इससे पहले कि यह तत्व को ओवरफ़्लो कर सकता है और किसी भी तरह से तत्व चौड़ाई को ऑटो पर ठीक कर सकता है।

वर्तमान में केवल Chrome: http://jsfiddle.net/2px3b63j/7/

एचटीएमएल:

<div class="pusher"></div> 
<nav> 
    <a data-title="First" href="#"></a><a data-title="Second" href="#"></a><a data-title="Third" href="#"></a><a data-title="Fourth" href="#"></a><a data-title="Fifth" href="#"></a> 
</nav> 

कम: जवाब देने के लिए

@h: 3em; 
@w:6em; 
* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    font: 0.9rem sans-serif; 
    background: #666; 
} 

.pusher { 
    float: left; 
    width: ~"calc(100% - " (@w * 1.01) ~")"; 
    height: @h * 6; 
    -webkit-shape-outside: polygon(0 @h, 100% @h, 100% 100%, 0 100%); 
} 

nav { 
    position: relative; 
    text-align: right; 
    background: white; 
    height: @h; 
    line-height:0; 
    a { 
    position: relative; 
    text-align:center; 
    width: @w; 
    max-width: 100%; 
    display: inline-block; 
    background: white; 
    text-decoration: none; 
    color: #333; 
    font-weight: bold; 
    height: @h; 
    line-height: @h; 
    &:before { 
     content: attr(data-title); 
    } 
    } 
} 

लिंक: https://jsfiddle.net/ky83870x/1/ इंटरनेट एक्सप्लोरर में काम नहीं करता है लेकिन मैं इसे एज में काम करता है मान । यदि कोई इसे आईई में काम करने का कोई तरीका ढूंढ सकता है, तो मुझे

Answer 1

फ्लेक्स बॉक्स का उपयोग करके अपना आउटपुट प्राप्त करने की एक संभावना है।

फ्लेक्सबॉक्स इतना संकीर्ण बनाएं कि कोई भी बच्चा फिट होगा। इससे बच्चों को एक पंक्ति में जाने के लिए मजबूर किया जाता है।

अतिरिक्त मार्जिन को मजबूर करने के लिए पहले बच्चे के सामने एक छद्म तत्व जोड़ें।

रूप में की जरूरत

फ्लेक्स जस्टिफाई और सही करने के लिए फ्लेक्स जगह है, क्योंकि अब सब कुछ छोड़ दिया है।

तत्वों हो रहा है आसानी से

.container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    border: solid 1px red; 
 
    width: 10px; 
 
    left: 500px; 
 
    position: absolute; 
 
    justify-content: flex-end; 
 
} 
 

 
.container div { 
 
    font-size: 20px; 
 
    margin: 5px; 
 
    background-color: lightblue; 
 
    display: inline-block; 
 
    flex-basis: auto; 
 
    flex-shrink: 0; 
 
} 
 

 
.container:before { 
 
    content: ""; 
 
    margin-left: -500px; 
 
    flex-basis: 10px; 
 
    background-color: yellow; 
 
    height: 6px; 
 
}

<div class="container"> 
 
    <div>Lorem</div> 
 
    <div>Ipsum dolor sit amet</div> 
 
    <div>Consectetur adipisicing elit</div> 
 
    <div>Unde saepe</div> 
 
    <div>Placeat neque mollitia</div> 
 
    <div>Accusamus fuga</div> 
 
    <div>Lorem</div> 
 
    <div>Ipsum dolor sit amet</div> 
 
    <div>Consectetur adipisicing elit</div> 
 
    <div>Unde saepe</div> 
 
    <div>Placeat neque mollitia</div> 
 
    <div>Accusamus fuga</div> 
 
</div>