मेरे पास एक केंद्रित कंटेनर div है और इसके साथ मेरे पास 2 divs हैं जिनमें से एक बाईं ओर तैरती है और एक दाईं ओर तैरती है। दाईं ओर तैरते हुए मेरा एक बच्चा div है जिसे मैं व्यूपोर्ट के दाहिने किनारे तक विस्तारित करना चाहता हूं।

मैंने cal से vw विकल्पों तक कई तरीकों की कोशिश की है और ऐसा करने के लिए बस एक अच्छा समाधान नहीं मिल रहा है। मैं आदर्श रूप से कम हैकी दृष्टिकोण पसंद करूंगा क्योंकि मैं चाहता हूं कि यह मोबाइल उपकरणों (आईओएस इत्यादि) पर ठीक काम करे। मेरे पास अब तक का कोड है:

कोड

body {
  background: #FFF;
}

.container {
  margin: 0 auto;
  width: 100%;
  max-width: 1360px;
}

.left {
  background: #0095ff;
  float: left;
  width: 32.35294%;
  height: 100px;
}

.right {
  float: right;
  width: 66.17647%;
  background: #F1F1F1;
  height: 100px;
}

.right .stretch {
  background: #ff8227;
  height: 50px;
}

.clear {
  clear: both;
  font-size: 0px;
  line-height: 0px;
  display: block;
}
<div class="container">
  <div class="left">left</div>
  <div class="right">
    <div class="stretch">right</div>
  </div>

  <div class="clear"></div>
</div>

यहाँ एक कार्यशील jsFiddle है: https://jsfiddle.net/ecr10ago/1/

यहाँ चित्रित करने के लिए एक छवि है। यह हल्का नारंगी सा है जिसे मैं विस्तार करने की कोशिश कर रहा हूं। यहां छवि विवरण दर्ज करें

0
alexgomy 9 अगस्त 2019, 23:28

1 उत्तर

सबसे बढ़िया उत्तर

यदि आप शरीर पर क्षैतिज अतिप्रवाह को छिपाने के लिए ठीक हैं, तो नीचे दिया गया मेरा समाधान आपके लिए काम करेगा।

मेरा मेकिंग .स्ट्रेच बिल्कुल स्थित है, इसके माता-पिता के सापेक्ष। ठीक है, मैं प्रभाव प्राप्त करने में सक्षम था।

मैं जो करने में असमर्थ था, वह एक ऐसा समाधान था जो इसे व्यूपोर्ट के दाहिने किनारे पर रखेगा, इसलिए मैंने एक निश्चित मूल्य का उपयोग किया, और शरीर पर क्षैतिज अतिप्रवाह को छिपा दिया।

body {
  background: #FFF;
  overflow-x: hidden;
}

.container {
  margin: 0 auto;
  width: 100%;
  max-width: 1360px;
}

.left {
  background: #0095ff;
  float: left;
  width: 32.35294%;
  height: 100px;
}

.right {
  float: right;
  width: 66.17647%;
  background: #F1F1F1;
  height: 100px;
  position: relative;
}

.right .stretch {
  background: #ff8227;
  height: 50px;
  position: absolute;
  right: -2000px;
  left: 0;
}


.clear {
  clear: both;
  font-size: 0px;
  line-height: 0px;
  display: block;
 }
<div class="container">
    <div class="left">left</div>
    <div class="right">
        <div class="stretch">right</div>
    </div>
    
    <div class="clear"></div>
</div>
1
James Allen 9 अगस्त 2019, 23:41