style - html video




आप फ्लोट का उपयोग किए बिना बाएं/दाएं को कैसे संरेखित करते हैं? (5)

इस तरह से कुछ करते समय:

<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>

मुझे एक खाली div का उपयोग करना होगा

clear: both;

जो मुझे बहुत गंदा लगता है।

तो, क्या फ्लोट के उपयोग के बिना संरेखित करने का एक तरीका है?

यहाँ मेरा कोड है:

.action_buttons_header a.green_button{
 
}
<div class="change_requests_container" style="width:950px !important">
    <div class="sidebar">
        
            
                <a href="/view/preview_unpublished_revision/422?klass=Proposal" class="preview sidebar_button_large action_button" name="preview" onclick="window.open(this.href);return false;">Preview New Version</a>
            
        
        
    </div>
    <div class="content_container">
        <div class="content">
                        
                <div class="action_buttons_header">
                    <a href="/changes/merge_changes/422" class="re_publish publish green_button" style="
    margin: 5px 0px 5px auto;
">Apply Changes</a>
                </div>
            
            


            <div id="change_list_container">    

<div class="changes_table">
    
        
            
            <style type="text/css">
                #original_492 .rl_inline_added {
                    display: none;
                }
                
                #492.change_container .actial_suggested_text_container{
                    display: none;
                }
            </style>
            <div class="content_section_header_container">
                <div class="content_section_header">
                    <a href="#" class="collapse" name="492"></a>
                    The Zerg | 
                    Overview
                    <div class="status" id="492_status">
                        <div id="492_status_placeholder">
                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="change_container" id="492">
                
            </div>
        </div>
    </div>
</div>

मैं क्षैतिज पट्टी के दाईं ओर हरे रंग का बटन चाहता हूं जो कि यह सबसे साफ तरीके से संभव है।

बस यह जानने की कोशिश कर रहा है कि सीएसएस को सुरुचिपूर्ण ढंग से, सफाई से कैसे किया जाए आदि।


अतिरिक्त तत्वों को जोड़ने की आवश्यकता नहीं है। जबकि फ्लेक्सबॉक्स बहुत ही गैर-सहज संपत्ति के नामों का उपयोग करता है यदि आप जानते हैं कि यह क्या कर सकता है तो आप इसे बहुत बार उपयोग करके खुद पाएंगे।

<div style="display: flex; justify-content: space-between;">
<span>Item Left</span>
<span>Item Right</span>
</div>

अक्सर इसकी आवश्यकता पर योजना?

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

मैं अन्य लोगों को प्राथमिक स्थिति में द्वितीयक शब्दों का उपयोग करते हुए देखता हूं जो सूचना पदानुक्रम की गड़बड़ी करता है। यदि संरेखण प्राथमिक कार्य है और दायां , बायां , और / या बीच माध्यमिक हैं, तो कक्षा .align_outer होनी चाहिए, न कि .outer_align क्योंकि यह समझ में आएगा क्योंकि आप अपना कोड स्कैन करते हैं।

.align_between {}
.align_left {}
.align_outer {}
.align_right {}

समय के साथ अच्छी आदतें आपको बाद में जल्द से जल्द बिस्तर पर लाने की अनुमति देंगी।


आप display: inline-block जैसी चीजों का उपयोग कर सकते हैं display: inline-block लेकिन मुझे लगता है कि आपको इसे स्थानांतरित करने के लिए एक और div स्थापित करने की आवश्यकता होगी, अगर बटन के बाईं ओर कुछ भी नहीं है तो आप इसे स्थानांतरित करने के लिए मार्जिन का उपयोग कर सकते हैं।

वैकल्पिक रूप से, लेकिन एक अच्छा समाधान नहीं है, आप टैग को स्थिति दे सकते हैं; position: relative रूप में शामिल किए गए div को रखें position: relative और फिर position: absolute; right: 0 रूप में बटन का विभाजन position: absolute; right: 0 position: absolute; right: 0 , लेकिन जैसा मैंने कहा कि यह शायद सबसे अच्छा समाधान नहीं है

एचटीएमएल

<div class="parent">
  <div>Left Div</div>
  <div class="right">Right Div</div>
</div>

सीएसएस

.parent {
  position: relative;
}
.right {
    position: absolute;
    right: 0;
}

एक और समाधान निम्नलिखित कुछ हो सकता है (आपके तत्व की प्रदर्शन संपत्ति के आधार पर काम करता है):

HTML:

<div class="left-align">Left</div>
<div class="right-align">Right</div>

सीएसएस:

.left-align {
  margin-left: 0;
  margin-right: auto;
}
.right-align {
  margin-left: auto;
  margin-right: 0;
}

कुछ ऐसा ही करने का एक और तरीका फ्लेक्सबॉक्स के साथ एक आवरण तत्व पर है, अर्थात,

 .row {
        display: flex;
        justify-content: space-between;
    }
  <div class="row">
        <div>Left</div>
        <div>Right</div>
    </div>

   


यह overflow: hidden; उपयोग करना बेहतर है overflow: hidden; हैक:

<div class="container">
  <div style="float: left;">Left Div</div>
  <div style="float: right;">Right Div</div>
</div>

.container { overflow: hidden; }

या यदि आप कुछ फैंसी CSS3 ड्रॉप-शैडो सामान करने जा रहे हैं और आपको उपरोक्त समाधान में परेशानी हो रही है:

http://web.archive.org/web/20120414135722/http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack

पुनश्च

यदि आप साफ सफाई के लिए जाना चाहते हैं, तो मैं उस overflow: hidden; बजाय इनलाइन जावास्क्रिप्ट के बारे में चिंता करना चाहता हूं overflow: hidden; हैक :)





css