删除div和其他包含图像的div之间的空白

我有一个问题，我无法获得两个div完全对齐。无论我尝试什么，它们之间都留有一些空白区域。删除div和其他包含图像的div之间的空白

HTML

<header> 
    <div id="slider" class="row"> 
     <div class="slideshow-container"> 
      <div class="mySlides fade"> 
       <img id="scroller1" class="scroller" src="https://www.pexels.com/blog/wp-content/uploads/pexels-photo-18-1280x420.jpg"> 
      </div> 
     </div> 
    </div> 
</header>   

<main> 
    <div id="Project" class="row"> 
     <div class="singlecol"> 
      <h1>Header1</h1> 
      <h2>Header2</h2> 
      <p class="blocktext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
    </div> 
</main>

CSS

body { 
    margin: 0; 
} 

h1, h2, p { 
    font-family: 'Open Sans', sans-serif; 
    text-align: center; 
    padding: 0 5% 0 5%; 
    margin: 0; 
} 

p { 
    padding: 1% 0 1% 0; 
    text-align: justify; 
    color: #383433; 
    max-width: 100%; 
    vertical-align: top; 
} 

h1 { 
    color: #383433; 
    padding: 0 0 0 0; 
} 

h2 { 
    color: #843a32; 
} 

.slideshow-container { 
    box-sizing: border-box; 
    max-width: 100%; 
    display: inline-block; 
    margin: 0; 
} 

img.scroller { 
    width: 100%; 
    max-height: 600px; 
    margin: 0; 
} 

.row { 
    display: flex; 
} 

.col { 
    flex: 1; 
} 

.singlecol { 
    background-color: red; 
    width: 100%; 
    text-align: center; 
    display: inline-block; 
}

我一直在试图解决这一问题了几个小时，删除CSS可能的每一行，但我可以似乎没有把我的头围住它。我也检查了关于这个主题的早些时候的问题，但我没有尝试解决这个问题。

希望得到一些新鲜的眼睛:-)

来源

2017-06-03 BjornsBot

小提琴链接不起作用 –

https://jsfiddle.net/o4334uss/ –

检查这个[的jsfiddle（https://jsfiddle.net/o4334uss/7/） –

使img元素display:block，因为它继承了inline从其父母。

img.scroller { 
    width: 100%; 
    max-height: 600px; 
    margin: 0; 
    display: block; 
}

https://jsfiddle.net/kqL84Lmx/

来源

2017-06-03 06:39:49

这不适合我。同样在你的小提琴示例中，空格仍然存在。还有其他建议吗？谢谢！ – BjornsBot

我忘了保存我的更改。看看这个：https://jsfiddle.net/kqL84Lmx/ –

似乎确实工作，但是当我将它添加到我的CSS文件它似乎并没有改变任何东西。你愿意看看完整的文件吗？也许一些其他的CSS正在干扰 – BjornsBot

只需添加

.mySlides.fade { 
    display: grid !important; 
}

的CSS :)

https://jsfiddle.net/o4334uss/6/

来源

2017-06-03 06:37:11

此不起作用（我只拿出了这个例子的基本代码）。在我的真实框架中，它是一个滑块，“显示：网格”代码使所有图像显示在彼此之下。我确实看到它如何与单个图像合作（如在你的小提琴中）。你有什么其他的建议？ – BjornsBot

删除div和其他包含图像的div之间的空白

回答

相关问题