#container {
  height: 500px;
  width: 500px;
  background-color: blue;
}

#container>div {
  background-color: rgb(36, 209, 13);
  height: 100px;
}

#one {
  width: 1000px;
}

#two {
  width: 800px;
}
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
</div>

यह वही है जो सिकुड़े बिना दिखेगा।

#container {
  height: 500px;
  width: 500px;
  background-color: blue;
}

#container>div {
  background-color: rgb(36, 209, 13);
  height: 100px;
}

#one {
  width: 500px;
}

#two {
  width: 400px;
}
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
</div>

यह साथ है। चौड़ाई को मैन्युअल रूप से समायोजित किए बिना ऐसा करने का सबसे अच्छा तरीका क्या है? मैंने flex-direction: column; के साथ फ्लेक्सबॉक्स का उपयोग करने की कोशिश की लेकिन यह प्रति पंक्ति केवल एक आइटम के साथ कम नहीं होगा। मैं transform: scaleX(0.5); या ऐसा कुछ भी उपयोग नहीं करना चाहता। उन सभी को स्वचालित रूप से फिट होना चाहिए।

-1
user14638116 27 नवम्बर 2020, 10:50

2 जवाब

अगर मैं आपके प्रश्न को सही ढंग से समझता हूं, तो मैं निश्चित मान के बजाय चौड़ाई (एक और दो) को प्रतिशत के रूप में सेट कर दूंगा। इस तरह उनके कंटेनर के सापेक्ष इसकी चौड़ाई हमेशा रहेगी।

#container {
  height: 500px;
  width: 600px;
  background-color: blue;
}

#container>div {
  background-color: rgb(36, 209, 13);
  height: 100px;
}

#one {
  width: 100%;
}

#two {
  width: 80%;
}
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
</div>
0
Edy Espinal 27 नवम्बर 2020, 11:05

container overflow:hidden दें

#container {
  height: 500px;
  width: 500px;
  background-color: blue;
  overflow:hidden;
}

#container>div {
  background-color: rgb(36, 209, 13);
  height: 100px;
}

#one {
  width: 500px;
}

#two {
  width: 400px;
}
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
</div>

और शुरू करने से पहले आपको इस कोड को अपनी CSS फ़ाइल में जोड़ना चाहिए

* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
0
Kareem Sultan 27 नवम्बर 2020, 11:16