[javascript] एक वस्तु के अंदर की सामग्री को हटाने के बाद रहस्य अंतरिक्ष पंक्ति के ऊपर बनाया गया



0 Answers

vertical-align: top उपयोग vertical-align: top item vertical-align: top और किसी भी आइटम की सामग्री खाली होने पर आप रहस्य अंतरिक्ष से छुटकारा पा सकते हैं।

यह इसलिए होता है क्योंकि ग्रिड आइटम inline (इनलाइन-फ्लेक्स)। ध्यान दें कि vertical-align सभी इनलाइन-स्तर और तालिका-सेल तत्वों पर लागू होता है और इनलाइन स्तर के तत्वों को खड़ी रूप से पंक्तिबद्ध करने के लिए उपयोग किया जाता है- यहां दस्तावेज़ देखें।

inline-flex को inline-block बदलें और आप एक ही व्यवहार के बारे में देख सकते हैं।

नीचे दिए गए स्निपेट में vertical-align और अपने लिए जांचें:

.context {
  text-align: center;
  height: 400px;
  border: 1px solid black;
}
#modal {
  display: none
}
.grid {
  margin-top: 100px;
  font-size: 0;
  border: 1px solid red;
}
.item {
  width: calc(100% / 4);
  height: 100px;
  transform-origin: center;
  position: relative;
  display: inline-flex;
  transition: box-shadow .3s, transform .3s;
  font-size: 1em;
  vertical-align: top;
}
.description {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  top: 0;
  bottom: 0;
  z-index: 100;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 20px;
  transition: opacity .3s;
}
.img-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
}
img {
  height: 100%;
  width: auto;
  display: block;
  margin: auto;
}
.cover {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 1000;
  cursor: pointer;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-align: center;
  color: white;
  transition: transform .3s, opacity .3s;
}
.cover-red {
  background-color: #ff9f80;
}
.cover-green {
  background-color: #66cc66;
}
.cover-blue {
  background-color: #809fff;
}
.cover-yellow {
  background-color: #ffff80;
}
.cover-mag {
  background-color: hsl(338, 95%, 70%);
}
.cover-cyan {
  background-color: hsl(214, 100%, 65%);
}
.item:hover {
  box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.3);
  z-index: 1100;
  transform: scale(1.02);
}
.item:hover .cover {
  opacity: 0
}
<div class="context">
  <div class="grid">
    <div class="item">


    </div>

    <div class="item">
      <div class="cover cover-cyan">
        <h1>Title 2</h1>
      </div>
      <div class="img-wrapper">
        <img src="http://rs415.pbsrc.com/albums/pp236/Keefers_/Keffers%20Animals/funny-cats-a10.jpg~c200">
      </div>
      <div class="description">
        <p>Description for item 2</p>
        <p>More info</p>
      </div>
    </div>

    <div class="item">
      <div class="cover cover-mag">
        <h1>Title 3</h1>
      </div>
      <div class="img-wrapper">
        <img src="http://i1.kym-cdn.com/entries/icons/original/000/007/203/nononocat.jpg">
      </div>
      <div class="description">
        <p>Description for item 3</p>
        <p>More info</p>
      </div>
    </div>

    <div class="item">
      <div class="cover cover-green">
        <h1>Title 4</h1>
      </div>
      <div class="img-wrapper">
        <img src="https://media0.giphy.com/media/3o85xoi6nNqJQJ95Qc/200_s.gif">
      </div>
      <div class="description">
        <p>Description for item 4</p>
        <p>More info</p>
      </div>
    </div>

    <div class="item">
      <div class="cover cover-cyan">
        <h1>Title 5</h1>
      </div>
      <div class="img-wrapper">
        <img src="https://media0.giphy.com/media/o0vwzuFwCGAFO/200_s.gif">
      </div>
      <div class="description">
        <p>Description for item 5</p>
        <p>More info</p>
      </div>
    </div>

    <div class="item">
      <div class="cover cover-green">
        <h1>Title 6</h1>
      </div>
      <div class="img-wrapper">
        <img src="http://cdn.thecatsite.com/3/37/200x200px-ZC-379ffbad_anime-cat-cute-cuteness-overload-kitten-Favim_com-350157_large.jpeg">
      </div>
      <div class="description">
        <p>Description for item 6</p>
        <p>More info</p>
      </div>
    </div>

    <div class="item">
      <div class="cover cover-red">
        <h1>Title 7</h1>
      </div>
      <div class="img-wrapper">
        <img src="http://www.officialstarwarscostumes.com/~/media/products/oc/yoda-costumes/pet-yoda-costumes/9935319-yoda-cat-hood-pet-star-wars-costumes-000.ashx?w=200&h=200&bc=ffffff">
      </div>
      <div class="description">
        <p>Description for item 7</p>
        <p>More info</p>
      </div>
    </div>

    <div class="item">
      <div class="cover cover-mag">
        <h1>Title 8</h1>
      </div>
      <div class="img-wrapper">
        <img src="http://adst.org/wp-content/uploads/2014/02/cat-general-120-3-_tplq-200x200.jpg">
      </div>
      <div class="description">
        <p>Description for item 8</p>
        <p>More info</p>
      </div>
    </div>
  </div>
  <div id="modal">
  </div>
</div>

संपादित करें :

@Michael_B मैंने inline-block को एक ही व्यवहार दिखाते हुए एक डेमो बनाया- मुझे इनलाइन तत्वों का सामान्य व्यवहार लगता है:

.wrapper {
  border: 1px solid;
}
.wrapper > * {
  display: inline-block;
  border: 1px solid;
  height: 100px;
  width: 100px;
}
<div class="wrapper">
  <div></div>
  <div>
    <h1>kjk</h1>
  </div>
</div>

Question

मेरे पास कुछ वस्तुओं के साथ एक ग्रिड है, और जब मैं किसी भी आइटम पर क्लिक करता हूं तो उस मद की सामग्री को एक मॉडल में ले जाता हूं।

मोडल महान काम करता है, लेकिन जब मैं आइटम से सामग्री को निकालता हूं, तो एक वस्तु आइटम के ऊपर दिखाई देती है।

मुझे पता है कि इस समस्या का एक तरीका एक फ्लेक्सबॉक्स का उपयोग कर सकता है, जो ठीक काम करता है, लेकिन मुझे यह समझना है कि यहां क्या हो रहा है।

यहाँ कुछ महत्वपूर्ण हो सकता है कि प्रत्येक आइटम में 3 बच्चे हैं

मैं position: absolute उपयोग करता हूं position: absolute उनमें से दो में position: absolute , और दूसरा एक डिफ़ॉल्ट स्थिति के साथ रहता है।

अगर मैं position: absolute उपयोग करता हूं position: absolute सभी बच्चों में position: absolute , समस्या ठीक होती है

अंतर क्या है?

जब मैं आइटम पर क्लिक करता हूं तो सामग्री गायब हो जाती है, तो सामग्री के आधार पर परिणाम अलग कैसे हो सकता है?

यहां एक JSFiddle समस्या दिखा रहा है।

असल में, संरचना निम्न है:

एचटीएमएल

<div class="context">
    <div class="grid">
        <div class="item">
            <div class="cover">  // has position: absolute
                <h1>Title</h1>
            </div>
            <div class="img-wrapper">  // has position: absolute
                <img/>
            </div>
            <div class="description">  // doesn't have a position defined
                <p>Description...</p>
            </div>
        <div class="item">
            // item content
        </div>
    </div>
</div>

मेरे पास कुल 8 आइटम हैं, जो प्रत्येक 4 आइटम के दो पंक्तियों में लिपटे हुए हैं।

सीएसएस

यह प्राप्त करने के लिए सीएसएस निम्नलिखित है:

.grid {
  margin-top: 100px;
  font-size: 0; // to get all the items together
  border: 1px solid red;
}

.item {
  width: calc(100% / 4);
  height: 100px;
  position: relative;
  display: inline-flex;
}

.description {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  top: 0;
  bottom: 0;
}

.img-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

img {
  height: 100%;
  width: auto;
  display: block;
  margin: auto;
}

.cover {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

नोट : JSfiddle उदाहरण स्टाइल के लिए और अधिक सीएसएस है, लेकिन आधार समान है, और समस्या अभी भी उपरोक्त कोड के साथ दिखाई देती है।

जावास्क्रिप्ट

अंत में, जेएस सामग्री को मंडल डिवा में ले जाने के लिए निम्नलिखित है:

let $itemNode;
let $itemContent;

$().ready(args => {
  // Cache the modal node
  let $modal = $('#modal');

  $('.item').click(function() {
    // First cache the item and content
    // to put it back when needed
    $itemNode = $(this);
    $itemContent = $(this).children();

    // Hides the item
    $itemNode.css({visibility: 'hidden'});

    // Transfer project content to the modal
    $itemContent.appendTo($modal);
  });

});



Related