我的 CSS 乱七八糟,过去 4 个小时我都试图修复它,但我无法修复它。我在另一个 div 中得到了一个 div,它们都在同一部分下。
'.app' div 离开该部分并向下移动到另一个部分
html:
<section id="portfolio" data-aos="fade-right">
<h1 data-aos="slide-right">My Projects</h1>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="app">
<div class="image">
<img src="../assets/images/coupon.jpg" alt="" />
</div>
<ul>
<li><span> Name: </span> Coupon System</li>
<li><span>Description:</span> Final project in studies</li>
<li><span>Back-end:</span> Java,Spring Framework, Hibernate</li>
<li><span>Front-end:</span> Angular, CSS, Html</li>
<li><span>Database:</span> MySQL</li>
<li>
<span>Link:</span>
<button
onclick="window.open('http://coupon1.us-east-2.elasticbeanstalk.com','_blank')"
>
click here
</button>
</li>
</ul>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
CSS:
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
}
#portfolio {
background: #00ff40;
padding: 30px 10px 30px 10px;
}
.app {
position: absolute;
display: flex;
flex-wrap: wrap;
height: 100%;
background-color: #bc2a8d;
}
.app .image {
display: flex;
flex-direction: column;
min-width: 100%;
justify-content: center;
align-items: center;
height: 30%;
}
.app .image img {
flex-grow: 1;
max-width: 100%;
max-height: 100%;
}
正如您还看到的,在主 div 内的图片和文本之间有一个很大的空间,我想将其删除。
衷心感谢!
更新:为了更容易修复,我删除了“.app”div 并使用了一个只有段落的新 div:
<div class="swiper-container">
<div class="swiper-wrapper">
<div>
<p>
facilis nobis atque quod eum maxime non aspernatur, consequatur
ad. Ad, fuga vero? Aut pariatur deserunt nulla incidunt. Possimus
nesciunt vel at enim. Ea, iste. Doloremque, blanditiis explicabo
atque perferendis laboriosam excepturi cum consequuntur deleniti?
Cumque adipisci asperiores doloremque saepe optio nam temporibus
labore totam. Provident, amet officiis? Numquam dicta officia
nulla autem blanditiis ratione. Nam placeat doloribus veniam
perspiciatis corrupti ratione, odio deserunt repellat, adipisci
recusandae incidunt culpa fuga aspernatur et temporibus illum
suscipit reiciendis saepe quam. Iusto illo culpa veritatis
consequuntur alias quo a nulla soluta eveniet reprehenderit
sapiente veniam nam, commodi est officiis porro aliquid.
Laboriosam debitis eaque commodi nesciunt earum ipsam voluptates,
quo ab. Adipisci consequuntur ut hic repellendus? Eligendi
mollitia, voluptatum sed magni quo aliquam officiis blanditiis qui
tempore adipisci quasi deserunt, nam reiciendis, non nostrum nemo
doloremque eius quisquam eos ad corrupti. Labore accusantium totam
eaque natus iste incidunt praesentium? Voluptatum numquam dolorem
vitae mollitia quae! Molestias laboriosam, sapiente, earum
accusantium unde aperiam itaque corrupti culpa pariatur maiores
obcaecati sint illo veniam. Architecto optio minus voluptas
voluptatum quibusdam, neque odit nihil ex officiis explicabo
voluptates quod. Omnis, ab consequuntur! Quam inventore ut non
odio velit doloribus rem, cum amet iusto quia suscipit? Culpa
minus fuga harum saepe voluptatum ipsum non unde, nemo, deleniti
illo enim mollitia quaerat officia commodi optio laborum
blanditiis corporis laboriosam, tempora obcaecati ipsam eligendi
quam! A, inventore accusantium. Totam quibusdam quam dignissimos
quisquam reprehenderit quidem tenetur fuga voluptates minus
praesentium iste dicta illo eveniet rem eum, sunt omnis quae natus
ea! Quasi enim voluptatibus non. Doloribus, minus odit. Atque in
minus quidem sit, consectetur fugiat obcaecati veritatis,
architecto aperiam eaque sed delectus vero debitis accusantium
laboriosam corporis nemo exercitationem ex ad. Esse consequuntur,
provident non iusto dolorem inventore. Excepturi explicabo
quisquam qui commodi corporis dolore. Minima, beatae alias
perferendis quaerat deserunt, obcaecati eveniet consectetur, odio
quos dolor repellat? Aliquid, impedit quasi ratione blanditiis
ipsam esse odit soluta doloribus. Iste, harum repellendus quaerat
vel iusto ducimus ratione cumque a magni ipsa nihil, fugiat itaque
cupiditate quae non incidunt. Modi nesciunt fugiat quam ipsa magni
officia quasi a error accusamus? Cumque ad, iure necessitatibus
excepturi animi ipsum debitis distinctio maxime, cupiditate
impedit vel quis quo explicabo error deleniti accusamus autem
quae, rerum exercitationem deserunt illo repellat. Enim distinctio
reprehenderit quas? Quos reiciendis nemo provident porro adipisci
quam magni perferendis vero error necessitatibus, reprehenderit
corrupti labore deleniti ea non cumque nobis harum incidunt?
Commodi ratione quis obcaecati vel eligendi excepturi quasi.
Libero quae earum neque consequuntur vero tempora! Aliquid
officiis architecto sunt pariatur maiores consectetur officia
doloribus iste provident soluta ab, distinctio vel illum
voluptates nulla ea doloremque odio nemo voluptas.
</p>
</div>
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
#portfolio {
background: #00ff40;
padding: 30px 10px 30px 10px;
}
#portfolio h1 {
margin-bottom: 0px;
margin: 0;
text-align: center;
font-size: 20px;
border-bottom: 3px solid rgb(223, 0, 0);
}
.app {
position: absolute;
display: flex;
flex-wrap: wrap;
height: 100%;
background-color: #bc2a8d;
}
.app .image {
display: flex;
flex-direction: column;
min-width: 100%;
justify-content: center;
align-items: center;
height: 30%;
}
.app .image img {
flex-grow: 1;
max-width: 100%;
max-height: 100%;
}
<section id="portfolio" data-aos="fade-right">
<h1 data-aos="slide-right">My Projects</h1>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div>
<p>
facilis nobis atque quod eum maxime non aspernatur, consequatur
ad. Ad, fuga vero? Aut pariatur deserunt nulla incidunt. Possimus
nesciunt vel at enim. Ea, iste. Doloremque, blanditiis explicabo
atque perferendis laboriosam excepturi cum consequuntur deleniti?
Cumque adipisci asperiores doloremque saepe optio nam temporibus
labore totam. Provident, amet officiis? Numquam dicta officia
nulla autem blanditiis ratione. Nam placeat doloribus veniam
perspiciatis corrupti ratione, odio deserunt repellat, adipisci
recusandae incidunt culpa fuga aspernatur et temporibus illum
suscipit reiciendis saepe quam. Iusto illo culpa veritatis
consequuntur alias quo a nulla soluta eveniet reprehenderit
sapiente veniam nam, commodi est officiis porro aliquid.
Laboriosam debitis eaque commodi nesciunt earum ipsam voluptates,
quo ab. Adipisci consequuntur ut hic repellendus? Eligendi
mollitia, voluptatum sed magni quo aliquam officiis blanditiis qui
tempore adipisci quasi deserunt, nam reiciendis, non nostrum nemo
doloremque eius quisquam eos ad corrupti. Labore accusantium totam
eaque natus iste incidunt praesentium? Voluptatum numquam dolorem
vitae mollitia quae! Molestias laboriosam, sapiente, earum
accusantium unde aperiam itaque corrupti culpa pariatur maiores
obcaecati sint illo veniam. Architecto optio minus voluptas
voluptatum quibusdam, neque odit nihil ex officiis explicabo
voluptates quod. Omnis, ab consequuntur! Quam inventore ut non
odio velit doloribus rem, cum amet iusto quia suscipit? Culpa
minus fuga harum saepe voluptatum ipsum non unde, nemo, deleniti
illo enim mollitia quaerat officia commodi optio laborum
blanditiis corporis laboriosam, tempora obcaecati ipsam eligendi
quam! A, inventore accusantium. Totam quibusdam quam dignissimos
quisquam reprehenderit quidem tenetur fuga voluptates minus
praesentium iste dicta illo eveniet rem eum, sunt omnis quae natus
ea! Quasi enim voluptatibus non. Doloribus, minus odit. Atque in
minus quidem sit, consectetur fugiat obcaecati veritatis,
architecto aperiam eaque sed delectus vero debitis accusantium
laboriosam corporis nemo exercitationem ex ad. Esse consequuntur,
provident non iusto dolorem inventore. Excepturi explicabo
quisquam qui commodi corporis dolore. Minima, beatae alias
perferendis quaerat deserunt, obcaecati eveniet consectetur, odio
quos dolor repellat? Aliquid, impedit quasi ratione blanditiis
ipsam esse odit soluta doloribus. Iste, harum repellendus quaerat
vel iusto ducimus ratione cumque a magni ipsa nihil, fugiat itaque
cupiditate quae non incidunt. Modi nesciunt fugiat quam ipsa magni
officia quasi a error accusamus? Cumque ad, iure necessitatibus
excepturi animi ipsum debitis distinctio maxime, cupiditate
impedit vel quis quo explicabo error deleniti accusamus autem
quae, rerum exercitationem deserunt illo repellat. Enim distinctio
reprehenderit quas? Quos reiciendis nemo provident porro adipisci
quam magni perferendis vero error necessitatibus, reprehenderit
corrupti labore deleniti ea non cumque nobis harum incidunt?
Commodi ratione quis obcaecati vel eligendi excepturi quasi.
Libero quae earum neque consequuntur vero tempora! Aliquid
officiis architecto sunt pariatur maiores consectetur officia
doloribus iste provident soluta ab, distinctio vel illum
voluptates nulla ea doloremque odio nemo voluptas.
</p>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
最佳答案
我认为是您 CSS 中的位置导致了重叠。
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.
.
.
.app {
position: absolute;
display: flex;
flex-wrap: wrap;
height: 100%;
background-color: #bc2a8d;
}
尝试在 .app 类之外添加另一个高度与内容匹配的 div。 或者只是删除位置。
我不确定你为什么使用这里的位置,所以我不能给你替代方案。 如果只想居中,可以尝试使用边距。
关于html - Div 超出部分的边界,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53384499/