Не включайте отступы / отступы по ширине при вложении div - PullRequest
Новая
       59

Не включайте отступы / отступы по ширине при вложении div

0 голосов
/ 08 июня 2018

У меня есть наложение поверх эскиза клипа и событие щелчка, чтобы открыть iFrame.Оверлей будет содержать данные ответа JSON о клипе, однако у меня возникли проблемы с оформлением оверлея, чтобы не включать поля в общий размер оверлея.Это, по понятным причинам, делает выравнивание текста очень проблематичным.

Так как бы мне сделать так, чтобы оверлей занимал ту же границу, не добавляя маржу к оверлею, фактически удваивая маржу полностью? 

#clips {
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
}

.clipImg {
  flex: 1;
  margin-bottom: 1em;
  padding-right: 1em;
}

.clipImg-overlay {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 496;
  height: 272;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0, 0, 0, .7);
  font-family: sans-serif;
}

.clipImg-container:hover .clipImg-overlay {
  opacity: 1;
}
<div class="clipImg-container" data-slug="ManlyEnjoyableSowKappaPride"><img src="https://clips-media-assets2.twitch.tv/28966899744-offset-8838-preview-480x272.jpg" class="clipImg">
  <div class="clipImg-overlay"><img id="channel-logo" src="https://static-cdn.jtvnw.net/jtv_user_pictures/d7747302-0948-478a-9017-976d285a2678-profile_image-150x150.png">
    <div id="info-container">
      <h1 id="clip-name">CODE BLUE CODE BLUE | Tip for free !loots</h1>
      <p id="clip-context">CodeSpent is playing PLAYERUNKNOWN'S BATTLEGROUNDS</p>
      <p id="clip-views">4 views</p>
      <p id="clip-curation">Clipped by sudocodesh</p>
    </div>
  </div>
</div>

enter image description here enter image description here

1 Ответ

0 голосов
/ 08 июня 2018

.clipImg-overlay относится к .clipImg-container, который расширяется с полем .clipImg.

Чтобы решить эту проблему, вы можете попробовать использовать поле в .clipImg-container или сделать div, которыйокружает .clipImg-overlay и .clipImg и имеет поле, которое фактически находится в .clipImg. 

<style>
  .clipImg {
    flex: 1;
  }

  .clipImg-container {
    margin-bottom: 1em;
    padding-right: 1em;
  }
</style>
<div class="clipImg-container" data-slug="ManlyEnjoyableSowKappaPride">
  <img src="https://clips-media-assets2.twitch.tv/28966899744-offset-8838-preview-480x272.jpg" class="clipImg">
  <div class="clipImg-overlay">
    <img id="channel-logo" src="https://static-cdn.jtvnw.net/jtv_user_pictures/d7747302-0948-478a-9017-976d285a2678-profile_image-150x150.png">
    <div id="info-container">
      <h1 id="clip-name">CODE BLUE CODE BLUE | Tip for free !loots</h1>
      <p id="clip-context">CodeSpent is playing PLAYERUNKNOWN'S BATTLEGROUNDS</p>
      <p id="clip-views">4 views</p>
      <p id="clip-curation">Clipped by sudocodesh</p>
    </div>
  </div>
</div>

или 

<style>
  .overlay-container {
    position: relative;
    margin-bottom: 1em;
    padding-right: 1em;
  }
</style>
<div class="clipImg-container" data-slug="ManlyEnjoyableSowKappaPride">
  <div class="overlay-container">
    <img src="https://clips-media-assets2.twitch.tv/28966899744-offset-8838-preview-480x272.jpg" class="clipImg">
    <div class="clipImg-overlay">
      <img id="channel-logo" src="https://static-cdn.jtvnw.net/jtv_user_pictures/d7747302-0948-478a-9017-976d285a2678-profile_image-150x150.png">
      <div id="info-container">
        <h1 id="clip-name">CODE BLUE CODE BLUE | Tip for free !loots</h1>
        <p id="clip-context">CodeSpent is playing PLAYERUNKNOWN'S BATTLEGROUNDS</p>
        <p id="clip-views">4 views</p>
        <p id="clip-curation">Clipped by sudocodesh</p>
      </div>
    </div>
  </div>
</div>
...