html - मैं अपना पक्ष कॉलम कैसे समाप्त कर सकता हूं?




css formatting (2)

ऐसा कुछ है ?: https://jsfiddle.net/xcy9s64g/

यह चाल सही बाल div स्थिति पूरी करने के लिए है:

position: absolute;
right: 0;
top: 0;

और जाहिर है, रिश्तेदार के रूप में मूल कंटेनर की स्थिति, पूर्ण स्थिति के लिए एक संदर्भ बिंदु प्रदान करने के लिए। फिर, आप बच्चों के लिए प्रतिशत का उपयोग कर सकते हैं

  #container {
    position: relative;
    width: 100%;
  }

क्या आप सोचते हैं कि एक टेबल बनाना (दो कॉलम के साथ, शरीर के रूप में एक और एक तरफ) वेबपेज को मोबाइल अनुकूल बनाने और सामग्री के लपेटन के लिए स्वचालित रूप से समायोजित करने का एक बेहतर तरीका होगा? या क्या डिवेल ग्रुपिंग का बेहतर तरीका है?

लेआउट के लिए एक तालिका का उपयोग करना एक बुरा विचार है यदि आप कुछ अलग करने की कोशिश करना चाहते हैं तो बजाय फ्लेक्सबॉक्स का उपयोग करें

मेरी वेबसाइट के लिए, मुझे शरीर के कॉलम के अंत तक सभी तरफ बढ़ने के लिए मेरी तरफ कॉलम नहीं मिल पाई है, बल्कि इसे एक निश्चित अधिकतम ऊंचाई दिए बिना (यह शरीर की लंबाई के अनुसार समायोजित होना चाहिए, जो कि या तो शब्दों की मात्रा / सामग्री शरीर और / या एक छोटी स्क्रीन में शरीर के लपेटन)। कृपया ध्यान रखें कि मेरे पास नीचे एक पाद लेख है जो स्क्रीन की पूरी चौड़ाई लेना चाहता है, इसलिए मैं ऐसा कुछ नहीं कर सकता जो साइड कॉलम को किसी चीज़ से अधिक लंबा बनाता है और शरीर के सभी स्तंभ पर सब कुछ रखता है।

यहां मेरा उदाहरण है: https://jsfiddle.net/r7g20fvk/

यहां कोड है:

<style>

.sidebar_container {
  float: right;
  width: 70%;
  max-width: 230px;
  margin: 0px 20px 20px 0;
  min-width: 300px;
  /*I can add a min-height until the side column is long enough to reach the entire bottom rather than end after the content runs out, but it doesn't adjust accordingly (to the length of the body column, whether the screen makes the body longer or the amount of text makes the body longer)*/
}

.left {
  overflow: hidden width: 70%;
  line-height: 2;
  font-size: 18px;
}
</style>

<div class="left">
  <h2>Home</h2>
</div>

<div>
  <div class="sidebar_container" style="float: right;">
    <div class="sidebar">
      <h2>Post 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
        <a href="#">Read More</a>

      </p>
    </div>
    <div class="sidebar">
      <h2>Post 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus.. <a href="#">Read More</a></p>
    </div>
    <div class="sidebar">
      <h2>Post 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat id. Donec vehicula lorem
        neque, vel mattis arcu semper in...<a href="#">Read More</a></p>
    </div>
    <!--close sidebar-->

  </div>

  <div class="left">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat id. Donec vehicula lorem
      neque, vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu enim a mauris ullamcorper
      tincidunt ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus in mauris. Nunc molestie libero
      quis odio tristique euismod.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat
      id. Donec vehicula lorem neque, vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu
      enim a mauris ullamcorper tincidunt ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus in mauris.
      Nunc molestie libero quis odio tristique euismod.</p>
  </div>
</div>

क्या यह तदनुसार समायोजित करने का एक तरीका है? संभवतः साइड कॉलम की चौड़ाई स्क्रीन की पूरी चौड़ाई का प्रतिशत बनती है, इसलिए यह एक छोटी स्क्रीन आकार को देखने के समय निश्चित चौड़ाई नहीं है, या इसे पूरी तरह से गायब हो या कुछ छोटे-छोटे मोबाइल स्क्रीन में होने पर। मैं इसे मोबाइल के अनुकूल बनाने और नीचे की ऊंचाई पर आधारित अपनी ऊंचाई समायोजित करने की कोशिश कर रहा हूं।

क्या आप सोचते हैं कि एक टेबल बनाना (दो कॉलम के साथ, शरीर के रूप में एक और एक तरफ) वेबपेज को मोबाइल अनुकूल बनाने और सामग्री के लपेटन के लिए स्वचालित रूप से समायोजित करने का एक बेहतर तरीका होगा? या क्या डिवेल ग्रुपिंग का बेहतर तरीका है?


मुझे लगता है कि आपको फ्लेक्सबॉक्स का उपयोग करना चाहिए, आशा है कि यह आपकी समस्या का समाधान करेगा

कृपया इस कोडप्न समाधान की जांच करें

body {
  background: #eee;
}

section {
  padding: 10px;
}

h2 {
  margin: 0;
  padding: 0;
  display: inline-block;
}

.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.main-container {
  background: #fff;
  margin: 10px;
  display: flex;
  /*flex-wrap: wrap;*/
  /*justify-content: space-between;*/
}

.left-container {
  flex: 3 3 70%;
  background-color: #fff;
}

.right-container {
  flex: 1 1 30%;
  flex-direction: column;
  background-color: #ccc;
}

@media screen and (max-width:768px) {
  .main-container {
    display: flex;
    flex-wrap: wrap;
  }
  .left-container {
    flex: 0 1 100%;
    order: 1;
    /*change the order of the blocks for smaller screens as you like */
    background-color: #fff;
  }
  .right-container {
    flex: 0 1 100%;
    order: 2;
    /*change the order of the blocks for smaller screens as you like */
    background-color: #ccc;
  }
}
<body>
  <div class="wrapper">
    <div class="main-container">
      <section class="left-container">
        <h2>Home</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat id. Donec vehicula lorem neque,
          vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu enim a mauris ullamcorper tincidunt
          ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus in mauris. Nunc molestie libero quis odio
          tristique euismod.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat
          id. Donec vehicula lorem neque, vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          eu enim a mauris ullamcorper tincidunt ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus
          in mauris. Nunc molestie libero quis odio tristique euismod.
        </p>
      </section>

      <section class="right-container">
        <article>
          <h2>Post 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
            <a href="#">Read More</a>
          </p>
        </article>

        <article>
          <h2>Post 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
            <a href="#">Read More</a>
          </p>
        </article>

        <article>
          <h2>Post 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
            <a href="#">Read More</a>
          </p>
        </article>
      </section>
    </div>
  </div>
</body>