2 कॉलम div लेआउट: निश्चित चौड़ाई, बाएं तरल पदार्थ के साथ दायां स्तंभ

Question

मेरी आवश्यकता सरल है: 2 कॉलम जहां दाहिनी ओर एक निश्चित आकार है । दुर्भाग्य से मुझे न तो काम करने का हल मिल सका, न ही स्टैकओवरफ्लो पर और न ही गूगल में। अगर मैं अपने संदर्भ में लागू करता हूं तो वर्णित प्रत्येक समाधान विफल हो जाता है। वर्तमान समाधान है:

div.container {
    position: fixed;
    float: left;
    top: 100px;
    width: 100%;
    clear: both;
}

#content {
    margin-right: 265px;
}

#right {
    float: right;
    width: 225px;
    margin-left: -225px;
}

#right, #content {
    height: 1%; /* fixed for IE, although doesn't seem to work */
    padding: 20px;
}

<div class="container">
    <div id="content">
        fooburg content
    </div>
    <div id="right">
        test right
    </div>
</div>

मुझे उपरोक्त कोड के साथ निम्नलिखित मिलेगा:

|----------------------- -------|
| fooburg content  |            |
|-------------------------------|
|                  | test right | 
|----------------------- -------|

कृपया सलाह दें। बहुत धन्यवाद!

Answer 1

बाएं कॉलम पर फ्लोट निकालें।

HTML कोड में, बाएं कॉलम से पहले दाहिने कॉलम को आने की जरूरत है।

यदि दाएं में एक फ्लोट (और एक चौड़ाई) है, और यदि बाएं कॉलम में चौड़ाई नहीं है और कोई फ्लोट नहीं है, तो यह सही हो जाएगा :)

overflow: hiddenबाहरी div पर एक और कुछ ऊँचाई (ऑटो हो सकती है) लागू करें, ताकि यह दोनों आंतरिक div को घेरे।

अंत में, बाएँ कॉलम में, एक जोड़ने width: autoऔर overflow: hidden, यह अधिकार एक से बाएँ कॉलम स्वतंत्र बनाता है (उदाहरण के लिए, यदि आप ब्राउज़र विंडो आकार दिया, और सही बाईं ओर स्तंभ एक को छुआ है, इन गुणों के बिना, बाएं स्तंभ चल पाएंगे दायीं ओर से घिरा हुआ है, इस गुण के साथ यह अपने स्थान पर बना हुआ है)।

उदाहरण HTML:

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible width
    </div>
</div>

सीएसएस:

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}​​

यहाँ उदाहरण: http://jsfiddle.net/jackJoe/fxWg7/

Comments

@ किसी भी कॉलम के clear: both अंदर बाहर के फ़्लोट्स को प्रभावित नहीं करेगा। यह "नाजुक" नहीं है जब तक कि आप कॉलम के बीच के समान स्तर पर स्पष्ट जगह नहीं देते हैं, अगर आप इसे अंत में रखते हैं तो कोई नुकसान नहीं होता है।

— जैकजॉय

मैं एडम के उदाहरण का उपयोग करने पर विचार करूंगा। मुझे नहीं लगता कि आपके html मार्कअप में बाएं कॉलम से पहले दाहिने कॉलम को रखना एक अच्छा विचार है।

— डैनी_जोरिस

@ डैनी_जोरिस मैं सहमत हूं। इसके अलावा, यदि आप मीडिया

— क्वेश्चन का

उन लोगों के लिए जो इस बारे में उत्सुक हैं कि यह कैसे काम करता है, एक स्पष्टीकरण यहां पाया जा सकता है: stackoverflow.com/questions/25475822/…

— हैशम क़ोलमी

मुझे आश्चर्य है कि अगर बाईं ओर दाएं स्तंभ होने का एक तरीका है, ताकि यह ठीक से स्टैक्स (फ्लेक्सबॉक्स का उपयोग किए बिना)

— डोमिनिक

Answer 2

Http://www.alistapart.com/articles/negativemargins/ देखें , यह वही है जो आपको चाहिए ( उदाहरण 4 वहां)।

<div id="container">
    <div id="content">
        <h1>content</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
        <p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
    </div>
</div>

<div id="sidebar">
    <h1>sidebar</h1>
    <ul>
        <li>link one</li>
        <li>link two</li>
    </ul>
</div>

---

#container {
    width: 100%;
    background: #f1f2ea url(background.gif) repeat-y right;
    float: left;
    margin-right: -200px;
}
#content {
    background: #f1f2ea;
    margin-right: 200px;
}
#sidebar {
    width: 200px;
    float: right;

Comments

शानदार, सरल समाधान और सही HTML आदेश भी रखता है!

— user1794295

यह स्वीकृत समाधान से बेहतर है क्योंकि मार्कअप सही क्रम में है।

— पेट्री लेहटिनन

मुझे इसकी जानकारी नहीं थी। मुझे इसके बारे में कैसे पता नहीं था। उत्तम! मैं संपूर्ण 'द्रव इनपुट, निश्चित-चौड़ाई खोज बटन' करने की कोशिश कर रहा हूं, और जाहिर है कि स्रोत आदेश वास्तव में यहां महत्वपूर्ण है। यह यह नाखून। धन्यवाद!

— मालाबार फ्रंट

मुझे यह समाधान पसंद है क्योंकि मोबाइल ब्रेकपॉइंट समय पर दाएं कॉलम / साइडबार बाएं कॉलम की सामग्री के ऊपर नहीं नीचे दिखाई देगा।

— dougtesting.net

मुझे इस विधि के साथ शीर्ष पर जाने के लिए सही कॉलम नहीं मिला।

— mulllhausen

Answer 3

बाएं से पहले दाएं कॉलम रखने से बचने के लिए, बस एक नकारात्मक सही-मार्जिन का उपयोग करें।

और "उत्तरदायी" एक @media सेटिंग शामिल करके ऐसा करें कि दाहिने कॉलम संकीर्ण स्क्रीन पर बाईं ओर गिरता है।

<div style="background: #f1f2ea;">
  <div id="container">
    <div id="content">
        <strong>Column 1 - content</strong>
    </div>
  </div>
  <div id="sidebar">
    <strong>Column 2 - sidebar</strong>
  </div>
<div style="clear:both"></div>

<style type="text/css">
#container {
    margin-right: -300px;
    float:left;
    width:100%;
}
#content {
    margin-right: 320px; /* 20px added for center margin */
}
#sidebar {
    width:300px;
    float:left
}
@media (max-width: 480px) {
    #container {
        margin-right:0px;
        margin-bottom:20px;
    }
    #content {
        margin-right:0px;
        width:100%;
    }
    #sidebar {
        clear:left;
    }
}
</style>

Comments

महान समाधान। HTML में बाईं ओर नीचे दाईं ओर रखना ब्लॉग जैसे लेआउट के लिए महत्वपूर्ण है, जहां बाईं ओर अधिक महत्वपूर्ण सामग्री है।

— जेक

बहुत बढ़िया जवाब! यहाँ कोडपेन पर एक कार्यशील उदाहरण दिया गया है: codepen.io/martinkrulltott/pen/yNxezM

— मार्टिन

Answer 4

सरल और सबसे लचीला समाधान अब तक इसका उपयोग करने के लिए table display:

HTML, बायाँ div पहले आता है, right div दूसरा आता है ... हम बाएँ से दाएँ पढ़ते हैं और लिखते हैं, इसलिए divs को दाएँ से बाएँ रखने का कोई मतलब नहीं होगा

<div class="container">
    <div class="left">
        left content flexible width
    </div>
    <div class="right">
        right content fixed width
    </div>
</div>

सीएसएस:

.container {
  display: table;
  width: 100%;
}

.left {
  display: table-cell;
  width: (whatever you want: 100%, 150px, auto)
}​​

.right {
  display: table-cell;
  width: (whatever you want: 100%, 150px, auto)
}

मामलों के उदाहरण:

// One div is 150px fixed width ; the other takes the rest of the width
.left {width: 150px} .right {width: 100%}

// One div is auto to its inner width ; the other takes the rest of the width
.left {width: 100%} .right {width: auto}

Comments

अच्छा लगा, अच्छा काम किया। कभी-कभी तालिकाओं के लिए एक समय और स्थान होता है जब फ्लेक्सबॉक्स एक व्यवहार्य विकल्प नहीं होता है। डोम में पहले सही सामग्री डालने के बजाय जो ठीक से स्टैक नहीं करता है ..

— डोमिनिक

मुझे यह पसंद है कि यह एक 'स्वच्छ' समाधान है। हालाँकि, अपने divs को table-cell मोड में रखने की एकमात्र समस्या यह है कि आप टेबल्स और Tds का भी उपयोग कर सकते हैं। और आप ओवरफ्लो स्क्रॉलिंग जैसे फीचर्स को खत्म कर देंगे

— MarzSocks

क्योंकि इस समाधान कम से कम, शब्दार्थ सही और बस RWD तकनीक के प्रति अनुकूल है एक का उपयोग कर, जबकि यही कारण है कि अनुचित है, tableसाथ tdसबसे निश्चित रूप से नहीं है!

— इयनप

यदि कॉलम संकरा हो जाता है तो यह विधि आसानी से एक मीडिया क्वेरी के लिए टेबल को एक नियमित div के लिए ड्रॉप करने की अनुमति देती है। अच्छा और साफ। मुझे पसंद है।

— एंथनीवो

Answer 5

मैं अभी तक एक असम्बद्ध समाधान का सुझाव देना चाहता हूं: CSS3 calc()को मिश्रण %और pxइकाइयों के लिए उपयोग करें । calc()है उत्कृष्ट समर्थन आजकल, और यह काफी जटिल लेआउट के तेजी से निर्माण के लिए अनुमति देता है।

यहां नीचे दिए गए कोड के लिए JSFiddle लिंक दिया गया है।

HTML:

<div class="sidebar">
  sidebar fixed width
</div>
<div class="content">
  content flexible width
</div>

सीएसएस:

.sidebar {
    width: 180px;
    float: right;
    background: green;
}

.content {
    width: calc(100% - 180px);
    background: orange;
}

और यहाँ एक और JSFiddle ने इस अवधारणा को प्रदर्शित करते हुए अधिक जटिल लेआउट पर लागू किया। मैंने यहाँ SCSS का उपयोग किया है क्योंकि इसके चर लचीले और स्व-वर्णनात्मक कोड के लिए अनुमति देते हैं, लेकिन "CSS- हार्ड-कोडेड" मान होने पर लेआउट को आसानी से शुद्ध CSS में फिर से बनाया जा सकता है।

Answer 6

यह एक सामान्य, HTML स्रोत है, जहां समाधान का आदेश दिया गया है:

• स्रोत क्रम में पहला स्तंभ द्रव है
• स्रोत क्रम में दूसरा स्तंभ तय हो गया है
  • इस कॉलम को CSS के इस्तेमाल से दाएं या बाएं घुमाया जा सकता है

फिक्स्ड / राइट पर दूसरा कॉलम

#wrapper {
  margin-right: 200px;
}
#content {
  float: left;
  width: 100%;
  background-color: powderblue;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: palevioletred;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

लेफ्ट पर फिक्स्ड / सेकंड कॉलम

#wrapper {
  margin-left: 200px;
}
#content {
  float: right;
  width: 100%;
  background-color: powderblue;
}
#sidebar {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: palevioletred;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

वैकल्पिक समाधान प्रदर्शन का उपयोग करना है: टेबल-सेल ; जिसके परिणामस्वरूप समान ऊँचाई के स्तंभ हैं।

Comments

सही पर दूसरा कॉलम काम नहीं करेगा। यदि बाएं कॉलम में टेक्स्ट भरा हुआ है, तो आपका राइट कॉलम एक नई पंक्ति के रूप में प्रदर्शित होगा।

— टॉमस्वायर

क्या आपने कभी अधिक सामग्री डालने और आकार बदलने की कोशिश की है। बस अपने कोड का परीक्षण किया और काम नहीं किया।

— टॉमस्वायर

@TomSawyer मुझे यकीन नहीं है कि आप किस बारे में बात कर रहे हैं। यहाँ मैं और अधिक सामग्री डालने का प्रयास कर रहा हूँ: jsfiddle.net/salman/mva6cnxL और jsfiddle.net/salman/mva6cnxL/1 । निर्दोष रूप से काम करता है।

— सलमान ए

बस मैंने जो खोजा था। धन्यवाद

Answer 7

अरे, आप क्या कर सकते हैं दोनों कंटेनरों के लिए एक निश्चित चौड़ाई लागू करें और फिर एक और div वर्ग का उपयोग करें जहां स्पष्ट: दोनों, जैसे

div#left {

width: 600px;
float: left;
}

div#right {

width: 240px;
float: right;

}

div.clear {

clear:both;

}

बाएँ और दाएँ कंटेनर के नीचे एक स्पष्ट div रखें।

Answer 8

मैंने इसे सरल बनाया है: मैंने जैकजो के उत्तर को संपादित किया है। ऊंचाई ऑटो आदि की आवश्यकता नहीं है मुझे लगता है।

सीएसएस:

#container {
position: relative;
margin:0 auto;
width: 1000px;
background: #C63;
padding: 10px;
}

#leftCol {
background: #e8f6fe;
width: auto;
}

#rightCol {
float:right;
width:30%;
background: #aafed6;
}

.box {
position:relative;
clear:both;
background:#F39;
 }
</style>

HTML:

<div id="container">

  <div id="rightCol"> 
   <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
 </div>

 <div id="leftCol">

   <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

लोरम इप्सम डोलर अमेट, कंसेटेट्युर एडिपिसिंग एलीट। फसेलस वेरियस एलिफेंड। लोरम इप्सम डोलर अमेट, कंसेटेट्युर एडिपिसिंग एलीट.फैसलस वेरियस एलिफेंड।

</div>

</div>

<div class="box">
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>

Comments

मूल प्रश्न निश्चित आकार के साथ एक सही कॉलम चाहता है।

— डॉ। आरोन डिश्नो