तलाक के अधिकार के लिए इस स्पैन को कैसे संरेखित करें?

151

मेरे पास निम्न HTML है:

<div class="title">
    <span>Cumulative performance</span>
    <span>20/02/2011</span>
</div>

इस सीएसएस के साथ:

.title
{
    display: block;
    border-top: 4px solid #a7a59b;
    background-color: #f6e9d9;
    height: 22px;
    line-height: 22px;
    padding: 4px 6px;
    font-size: 14px;
    color: #000;
    margin-bottom: 13px;
    clear:both;
}

यदि आप इस jsFiddle को देखते हैं: http://jsfiddle.net/8JwhZ/

आप देख सकते हैं कि नाम और दिनांक एक साथ अटक गए हैं। क्या कोई ऐसा तरीका है जिससे मुझे दाईं ओर संरेखित करने की तारीख मिल सकती है? मैं float: right;दूसरे पर कोशिश की है, लेकिन यह शैली ऊपर शिकंजा, और संलग्नक div के बाहर की तारीख धक्का

html css

— DaveDev
स्रोत

2

क्या आप HTML को संशोधित करने में सक्षम हैं?

— फोग्ज

3

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

— जोश कोवाच

246

यदि आप HTML को संशोधित कर सकते हैं: http://jsfiddle.net/8JwhZ/3/

<div class="title">
  <span class="name">Cumulative performance</span>
  <span class="date">20/02/2011</span>
</div>

.title .date { float:right }
.title .name { float:left }

— Phrogz
स्रोत

सीएसएस सरल और उचित साफ है: दोनों को जोड़ा जाना चाहिए। इसके अलावा

— फिडेल

9

या यदि आप इसे इनलाइन करना चाहते हैं (मैंने किया)

— मार्क

51

फ्लोट के साथ काम करना थोड़ा गड़बड़ है:

यह फ्लेक्सबॉक्स के साथ कई अन्य 'ट्रिवियल' लेआउट ट्रिक्स के रूप में किया जा सकता है।

   div.container {
     display: flex;
     justify-content: space-between;
   }

2017 में मुझे लगता है कि यह पसंदीदा समाधान है (फ्लोट के ऊपर) यदि आपको विरासत ब्राउज़र का समर्थन नहीं करना है: https://caniuse.com/#feat=flexbox

फिडल की जाँच करें कि फ्लेक्सबॉक्स ("कुछ प्रतिस्पर्धात्मक उत्तर शामिल हो सकते हैं") की तुलना में फ़्लोट कैसे भिन्न होता है: https://jsfiddle.net/b244s19k/25/ । यदि आपको अभी भी फ्लोट के साथ छड़ी करने की आवश्यकता है, तो मैंने पाठ्यक्रम के तीसरे संस्करण की सिफारिश की है।

— Risord
स्रोत

यह वह है जिसे मैंने उपयोग करने का विकल्प चुना है, सेट करने के लिए ध्यान रखें float: left;और float: right;जिन तत्वों में आप स्पेस देना चाहते हैं, उनमें स्पैन।

— रण लोटेम

1

इस उत्तर का मुख्य संदेश यह है कि "फ्लोट को हानिकारक माना जाता है" और आपको कभी भी उन का उपयोग नहीं करना चाहिए (ठीक है कि कुछ दुर्लभ अपवाद हैं)। तो क्या आप स्पष्ट कर सकते हैं कि आपको क्यों लगता है कि यह एक अच्छा विचार है?

— रिसर्ड

1

मुझे लगा floatकि आंतरिक तत्वों में इसकी आवश्यकता है क्योंकि मुझे लगा कि यह उनके लिए बेला उदाहरण में परिभाषित किया गया है, लेकिन इसके लिए #testDपरिभाषित नहीं किया गया है। मेरी गलती!

— रैन लोटेम

25

तैरने का एक वैकल्पिक समाधान पूर्ण स्थिति का उपयोग करना है:

.title {
  position: relative;
}

.title span:last-child {
  position: absolute;
  right: 6px;   /* must be equal to parent's right padding */
}

फिडल भी देखें ।

— फिलिप
स्रोत

5

आप इसे html को संशोधित किए बिना कर सकते हैं। http://jsfiddle.net/8JwhZ/1085/

<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>

.title span:nth-of-type(1) { float:right }
.title span:nth-of-type(2) { float:left }

— Kerel
स्रोत

4

बिना फ्लेक्सबॉक्स का उपयोग किए समाधान justify-content: space-between।

<div class="title">
  <span>Cumulative performance</span>
  <span>20/02/2011</span>
</div>

.title {
  display: flex;
}

span:first-of-type {
  flex: 1;
}

जब हम flex:1पहले का उपयोग करते हैं , तो यह पूरी शेष जगह को लेता है और दूसरे को दाईं ओर ले जाता है । इस समाधान के साथ पहेली: https://jsfiddle.net/2k1vryn7/

यहां https://jsfiddle.net/7wvx2uLp/3/ आप दो फ्लेक्सबॉक्स दृष्टिकोणों के बीच अंतर देख सकते हैं: फ्लेक्सबॉक्स के साथ justify-content: space-betweenऔर फ्लेक्सबॉक्स flex:1पहले के साथ ।

— hydro17
स्रोत