刪除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之間的空白

回答

相關問題