时间戳

首页 > 解决方案 > 无法摆脱 CSS 网格装订线（并且嵌入太宽）

css - 无法摆脱 CSS 网格装订线（并且嵌入太宽）

问题描述

我有一个简单的两行 CSS 网格（嵌套在另一个网格内），我有两个问题。

  1. 我无法让行之间的排水沟消失，除非将顶行内容的下边距减少 3px。关于更优雅的解决方案的任何想法？我在下面的 CSS 中注释掉了我的残酷修复。实时链接： http: //nyveen.ca/bb-test/

  2. 为什么嵌入的 Vimeo 视频会超出媒体 div 的边界一两个像素？

@charset "UTF-8";

body {
  background-color: #89726c;
}


.main-nav {
  grid-area: nav;
}

.main-head {
  grid-area: header;
}

.content {
  grid-area: content;
  background-color: #443937;
}

.main-footer {
  grid-area: footer;
}

.wrapper {
  margin: 5%;
  display: grid;
  gap: 20px;
  grid-template-areas: 
    "nav"
    "header"
    "content"
    "footer";
}

header, footer {
  background-color: #000000;
  color: #89726c;
}

nav, .content, a {
  color: #fffcfd;
}

nav ul {
  display: flex;
  justify-content: space-between;
}

img {
  max-width: 100%;
}

.media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
}

.image1 {
  grid-column-start: 1; 
  grid-column-end: 2; 
  grid-row-start: 1; 
  grid-row-end: 2; 
}

.image2 {
  grid-column-start: 2; 
  grid-column-end: 3; 
  grid-row-start: 1; 
  grid-row-end: 2; 
}

/** .image1, .image2 {
  margin-bottom: -3px;
}
**/

.video {
  grid-column-start: 1; 
  grid-column-end: 3; 
  grid-row-start: 2; 
  grid-row-end: 3;
}
<div class="wrapper">
    
    <nav class="main-nav">
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
        </ul>
    </nav>
    
    <header class="main-head">
        <p>TITLE</p>
        <p>in progress</p>
        <p>by me</p>    
    </header>
   
    <div class="content">
  
        <h1>film title 2020 00:05:00</h1>
        <div class="media">
            <div class="image1"><img src="http://nyveen.ca/bb-test/images/1.png"></div>
            <div class="image2"><img src="http://nyveen.ca/bb-test/images/2.png"></div>
            <div class="video">
                <div style="padding:46.88% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/207028770" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>
                <script src="https://player.vimeo.com/api/player.js"></script>
            </div>          
        </div>  

        <h1>second film 2020 00:05:00</h1>
        <div class="media">
            <div class="image1"><img src="http://nyveen.ca/bb-test/images/3.png"></div>
            <div class="image2"><img src="http://nyveen.ca/bb-test/images/4.png"></div>
            <div class="video">
                <div style="padding:42.5% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/108650530?color=ffffff&title=0&byline=0&portrait=0&badge=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>
                <script src="https://player.vimeo.com/api/player.js"></script>
            </div>          
        </div>  
        
    </div> 

    <footer class="main-footer">The footer</footer>
    
</div>

标签： cssgridvimeo

解决方案

要解决装订线问题，只需为图像包装器设置全高，为内部图像设置全宽和全高并最终覆盖它们，就像这样。

.image1 {
    grid-column-start: 1; 
    grid-column-end: 2; 
    grid-row-start: 1; 
    grid-row-end: 2; 
    height: 100%;
}

.image2 {
    grid-column-start: 1; 
    grid-column-end: 2; 
    grid-row-start: 1; 
    grid-row-end: 2; 
    height: 100%;
}

.image1 img, .image2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

关于你的第二个问题。我没有看到媒体 div 的任何边框。

推荐阅读