तो मैं सीएसएस में कुछ हद तक शुरुआत कर रहा हूं, मैं इस आकार को प्राप्त करने की कोशिश कर रहा हूं (रंगों, पृष्ठभूमि रंगों आदि को छोड़कर। अभी के लिए, अभी तक कोई समस्या नहीं है) तो मूल रूप से मेरे पास 3 खंड हैं और मैं चाहता हूं कि प्रत्येक अनुभाग में एक हो शीर्ष दाएं कोने पर इसके लिए शीर्षक (हमेशा शीर्ष-दाईं ओर) कभी भी स्थिति बदलने के लिए नहीं, भले ही अन्य तत्व शिफ्ट/स्थानांतरित हों, इसलिए मैं इस चित्र में दिखाए गए अनुसार हासिल करने की कोशिश कर रहा हूं।मैं जिस मॉड्यूल तक पहुंचने की कोशिश कर रहा हूं

और अब तक मैंने माई मॉड्यूल तक यही पाया है

यहां HTML कोड और CSS बॉडी एलिमेंट और उस पर लागू शैलियों के बाद है (नोट: कोड चलाने के बाद विंडो को चौड़ा करने का प्रयास करें ताकि शैलियों को लागू किया जा सके, इसे 992 पिक्सेल चौड़ा के बाद लागू किया जाएगा)

https://jsfiddle.net/62hsernc/4/

/*The Desktop Version*/

@media (min-width: 992px){
    *{
    box-sizing: border-box;
}
h1.header {
    margin-bottom: 30px;
      text-align: center;
}



span {
    border: 1px solid black;
    float:left;
    margin: 20px;
    
}

.sectionheader1, .sectionheader2, .sectionheader3{
    border: 1px solid black;
    width: 40%;
    float:right;
    text-align: center;
    position: relative;
    padding: 1px;
    margin: 0px;

    
    
}

.row{
    width: 100%;
}

    .col-lg-4{
        float: left;
        width : 33%;
        margin: 1px;

    }
}

नोट: जो मैं मुख्य रूप से प्राप्त करने का प्रयास कर रहा हूं वह span (डमी टेक्स्ट) को व्यक्तिगत रूप से नियंत्रित करने में सक्षम होना है, H1 की स्थिति या { से संबंधित किसी भी चीज को प्रभावित किए बिना। h1.

0
Kermit 6 सितंबर 2020, 15:52

2 जवाब

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

स्थिति: सापेक्ष को span पर और स्थिति: निरपेक्ष को h1 पर लागू करें, इसे शीर्ष के साथ रखें : 0 और दाएं: 0 ऊपर दाईं ओर, और इसके लिए जगह बनाने के लिए स्पैन में padding-top का उपयोग करें।

(नोट: मैंने आपकी मीडिया क्वेरी को यहां स्निपेट विंडो में काम करने के लिए अपने स्निपेट में से हटा दिया है)

/*The Desktop Version*/

* {
  box-sizing: border-box;
}

h1.header {
  margin-bottom: 30px;
  text-align: center;
}

span {
  border: 1px solid black;
  float: left;
  margin: 20px;
  position: relative;
  padding: 40px 10px 10px;
  background: #efefef;
}

.sectionheader1,
.sectionheader2,
.sectionheader3 {
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid black;
  width: 40%;
  min-width: 120px;
  text-align: center;
  padding: 1px 5px;
  background: #fba;
  margin: 0;
}

.row {
  width: 100%;
}

.col-lg-4 {
  float: left;
  width: 33%;
  margin: 1px;
}
<body>
  <h1 class="header">CSS-Module Header</h1>


  <div class="row">
    <section class="col-lg-4 col-md-6 col-sm-12">

      <span><h1 class = "sectionheader1">Chicken</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis sit amet lorem id feugiat. Morbi eu velit sit amet dui ultricies cursus. Sed tempus tellus id nisi vehicula eleifend vel in libero. Duis faucibus enim ac augue luctus lacinia. In condimentum odio in mi efficitur volutpat. Mauris non tristique est.</span>
    </section>
  </div>
</body>
0
Johannes 6 सितंबर 2020, 17:20

स्थिति डालने का प्रयास करें: निश्चित; मुझे यकीन नहीं है कि यह काम करेगा, लेकिन फिर भी इसे आजमाएं!

-1
pro_programmer 6 सितंबर 2020, 15:55