मैं दैवी तत्वों को कैसे संरेखित करूं?


351

मेरे HTML डॉक्यूमेंट के मुख्य भाग में 3 तत्व, एक बटन, एक फॉर्म और एक कैनवास है। मैं चाहता हूं कि बटन और फ़ॉर्म सही संरेखित हों और बाईं ओर संरेखित रहने के लिए कैनवास। समस्या यह है कि जब मैं पहले दो तत्वों को संरेखित करने की कोशिश करता हूं, तो वे अब एक दूसरे का अनुसरण नहीं करते हैं और इसके बजाय क्षैतिज रूप से एक दूसरे के बगल में होते हैं ?, मेरे पास अब तक का कोड है, मैं चाहता हूं कि फॉर्म सीधे दाईं ओर बटन के बाद का पालन करें बीच में कोई जगह नहीं है।

#cTask {
  background-color: lightgreen;
}

#button {
  position: relative;
  float: right;
}

#addEventForm {
  position: relative;
  float: right;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
  <script type="text/javascript" src="timeline.js"></script>
  <link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>

<body bgcolor="000" TEXT="FFFFFF">
  <div id="button">
    <button onclick="showForm()" type="button" id="cTask">
        Create Task
    </button>
  </div>
  <div id="addEventForm">
    <form>
      <p><label>Customer name: <input></label></p>
      <p><label>Telephone: <input type=tel></label></p>
      <p><label>E-mail address: <input type=email></label></p>
    </form>
  </div>
  <div>
    <canvas id="myBoard" width="1000" height="600">
      <p>Your browser doesn't support canvas.</p>
    </canvas>
  </div>
</body>
</html>

जवाबों:


338

आप ऐसा डिव बना सकते हैं जिसमें फॉर्म और बटन दोनों हों, फिर सेट करके दाईं ओर डिव फ्लोट करें float: right;


कभी नहीं सोचा था कि मैं फ्लोट का उपयोग करूंगा। मैंने कोशिश की margin-left: auto;लेकिन वह काम नहीं किया जिसने मुझे आश्चर्यचकित किया क्योंकि मैं जिस तत्व को सही करने की कोशिश कर रहा हूं वह सापेक्ष है।
DFSFOT 17

462

फ़्लोट्स ठीक हैं, लेकिन ie6 और 7 के साथ समस्याग्रस्त हैं।

मैं margin-left:auto; margin-right:0;आंतरिक div पर उपयोग करना पसंद करेंगे ।


6
@ShellNinja क्यों? मुझे पता 0है कि मान्य है, फिर भी 0px है ... अपनी बात पर बहस करें ताकि हम कुछ सीखें।
पेस्टनन

29
यूनिट को छोड़ने से ब्राउज़र इस बेहतर प्रदर्शन को प्रस्तुत करने पर कुछ गणनाओं को छोड़ देता है। यदि यह शून्य है तो एक इकाई के आधार पर लेआउट की गणना करने वाले संसाधनों को बर्बाद क्यों करें? शून्य इकाई की परवाह किए बिना शून्य है ... एक को लगता है कि यह तर्क अब तक ब्राउज़रों में बनाया जाएगा। लिंक
शैलनिजा

7
असहमत नहीं हो सकता, लेकिन मुझे संदेह है कि यह प्रदर्शन को बहुत प्रभावित करता है। संपादित करें।
पेस्टनन

24
मैं यह काम करने के लिए नहीं मिल सकता है, div अभी भी बाईं ओर संरेखित करता है। क्या आप html / css की एक बेला या कुछ (अधिक) लाइनें प्रदान कर सकते हैं?
ग्रिडो

21
सुनिश्चित करें कि आपके तत्व हैdisplay: block;
derek_duncan

203

पुराने उत्तर। अपडेट: फ्लेक्सबॉक्स का उपयोग करें, अब सभी ब्राउज़रों में बहुत काम करता है।

<div style="display: flex; justify-content: flex-end">
  <div>I'm on the right</div>
</div>

और आप भी कट्टरपंथी हो सकते हैं, बस:

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

और कट्टरपंथी:

<div style="display: flex; justify-content: space-around">
   <div>Left</div>
   <div>Middle</div>
  <div>Right</div>
</div>


4
यह काम करता है, लेकिन जब स्क्रीन स्टैकिंग के बजाय छोटा हो जाता है तो वे वास्तव में संकीर्ण हो जाते हैं
जीन डी'रामे

6
आपके द्वारा परिभाषित ब्रेकिंग बिंदु पर पंक्ति से स्तंभ तक फ्लेक्स-दिशा बदलने के लिए आपको एक मीडिया क्वेरी जोड़ने की आवश्यकता है। आप संभवतः इस उदाहरण में अपनी औचित्य-सामग्री को बदलना या निकालना चाहेंगे अन्यथा चीजें बाएं और दाएं के बजाय ऊपर और नीचे खिंचाव जाएंगी।
माइकल बुशे

इसने मेरे लिए काम किया। पिछले उत्तर नहीं थे। "चमकदार" का उपयोग करना।
रोजर

30

इस प्रश्न के लिए अन्य उत्तर इतने अच्छे नहीं हैं क्योंकि float:rightमाता-पिता के डिव के बाहर जा सकते हैं (अतिप्रवाह: माता-पिता के लिए छिपाना कभी-कभी मदद कर सकता है) और margin-left: auto, margin-right: 0मेरे लिए जटिल नेस्टेड डिव में काम नहीं किया (मैंने जांच क्यों नहीं की)।

मुझे पता चला है कि कुछ तत्वों के लिए text-align: rightकाम करता है, यह मानकर काम करता है कि तत्व और माता-पिता दोनों हैं inlineया inline-block

नोट: text-alignसीएसएस संपत्ति वर्णन करती है कि अपने मूल ब्लॉक तत्व में पाठ की तरह इनलाइन सामग्री कैसे संरेखित है। text-alignब्लॉक तत्वों के संरेखण को नियंत्रित नहीं करता है, केवल उनकी इनलाइन सामग्री।

एक उदाहरण:

<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
    <div style="display: block; width: 100%">
        I'm parent
    </div>
    <div style="display: inline-block; text-align: right; width: 100%">
        Caption for parent
    </div>
</div>

यहां जेएस फिडल है



15

यदि आपके पास कई divs हैं जो आप पैरेंट div के दाईं ओर संरेखित करना चाहते हैं, text-align: right;तो पैरेंट div पर सेट करें।


15

आप उपयोग कर सकते हैं flexboxके साथ flex-growसही करने के लिए पिछले तत्व पुश करने के लिए।

<div style="display: flex;">
  <div style="flex-grow: 1;">Left</div>
  <div>Right</div>
</div>

1
मुझे व्यक्तिगत रूप से लगता है कि यह 2020 के लिए सही उत्तर है: पी
माइक केलॉग

2

यदि आपको IE9 का समर्थन नहीं करना है और नीचे आप इसे हल करने के लिए फ्लेक्सबॉक्स का उपयोग कर सकते हैं: कोडपेन

IE10 और 11 ( फ्लेक्सबॉक्स समर्थन ) के साथ कुछ बग भी हैं , लेकिन वे इस उदाहरण में मौजूद नहीं हैं

आप लंबवत रूप से संरेखित कर सकते हैं <button>और <form>उन्हें कंटेनर में लपेट कर flex-direction: column। तत्वों का स्रोत क्रम वह क्रम होगा जिसमें वे ऊपर से नीचे तक प्रदर्शित होते हैं इसलिए मैंने उन्हें पुनः व्यवस्थित किया।

फिर आप क्षैतिज रूप से और बटन कंटेनर को कैनवस के साथ कंटेनर में लपेटकर रूप से संरेखित कर सकते हैं flex-direction: row। फिर से तत्वों का स्रोत क्रम वह क्रम होगा जिसमें वे बाएं से दाएं प्रदर्शित होते हैं इसलिए मैंने उन्हें पुनः व्यवस्थित किया।

इसके अलावा, यह आवश्यक होगा कि आप प्रश्न में लिंक किए गए कोड से सभी positionऔर floatशैली नियमों को हटा दें ।

यहां ऊपर दिए गए कोडपेन में HTML का एक ट्रिम डाउन संस्करण है।

<div id="mainContainer">
  <div>
    <canvas></canvas>
  </div>
  <div id="formContainer">
    <div id="addEventForm"> 
      <form></form>
    </div>
    <div id="button">
      <button></button>
    </div>
  </div>
</div>

और यहाँ प्रासंगिक CSS है

#mainContainer {
  display: flex;
  flex-direction: row;
} 

#formContainer {
  display: flex;
  flex-direction: column;
}

1

सरल जवाब यहाँ है:

<div style="text-align: right;">
    anything:
    <select id="locality-dropdown" name="locality" class="cls" style="width: 200px; height: 28px; overflow:auto;">
    </select>
</div>

0

आप अपनी सामग्री को दाईं ओर संरेखित करने के लिए बस पेडिंग-लेफ्ट: 60% (पूर्व के लिए) का उपयोग कर सकते हैं और साथ ही सभी उदाहरणों में काम करने के लिए यह सुनिश्चित करने के लिए उत्तरदायी कंटेनर में सामग्री लपेटें (मुझे मेरे मामले में नेबर की आवश्यकता है)।


0

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं, तो:

<div class="pull-right"></div>

मुझे लगता है कि आपका मतलब था <div class="text-right"></div>
एलेक्स बार्कर

1
अनिल गलत नहीं है, "फ्लोट: राइट;" (बूटस्ट्रैप 3.4.1 के साथ परीक्षण किया गया)
फेबियन होर्लाचर

-13

मुझे पता है कि यह एक पुरानी पोस्ट है लेकिन क्या आप <div id=xyz align="right">सही के लिए इस्तेमाल नहीं कर सकते ।

आप बस दाईं ओर बाईं ओर, केंद्र और औचित्य बदल सकते हैं।

मेरी साइट पर काम किया :)


21
कृपया अपने पृष्ठ को प्रारूपित करने के लिए HTML विशेषताओं का उपयोग न करें। यही सीएसएस के लिए बनाया गया था। वास्तव में, alignविशेषता अब पदावनत हो गई है
हन्ना

4
... और इसलिए इस तरह के एक सवाल का कारण और इसके जवाब की आवश्यकता है, क्योंकि पुराने तरीके अब काम नहीं करते हैं।
vapcguy

ओहोहोह, इतना नकारात्मक))
नेसी
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.