Question

我有一个问题，我无法让两个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，但我似乎无法绕过它。我之前也检查了关于这个主题的问题，但是我没有尝试解决这个问题。

会欣赏一些新鲜的眼睛： - ）

Answer 1

只需添加

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

到css：）

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

Answer 2

制作img元素display:block，因为它从父母那里继承了inline。

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

https://jsfiddle.net/kqL84Lmx/

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

2 个答案: