我不明白div内的空白间距。

如果你能在编辑器上查看代码会更好,但这里是快速解释。我真的不明白是什么在两个字符之间创造了白色的空间。div的–文本项目和画廊。它们在一个灵活的盒子里 div 与justify content: space-between和他们之间有巨大的差距。检查网站后,你可以看到,这是画廊的问题。

我试着删除了图片的页边距和padding,并删除了图片的 div 却没有用。我找了很久都找不到,请大家帮忙。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>People</title>
    <link rel='stylesheet' href='styles/styles.css'>
</head>

<body>
    <header>
        <div class='logo'>LOGO</div>
        <ul class='navbar'>
            <li><a class='light' href='./home.html'>Home</a></li>
            <li><a href='./projects.html'>Projects</a></li>
            <li><a href='./contact.html'>Contact</a></li>
        </ul>
    </header>
    <div class='wholeprojects'>
        <div class='textprojects'>
            <h1>Ut enim ad minima.</h1>
            <p>Quis nostrum exercitationem ullam corpori suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.
                Sed ut perspiciatis unde omnis iste
                natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
                inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo
            </p>
        </div>
        <div class='gallery'>
            <div class="row">
                <div class="column">
                    <img src="images/gallery1.jpg" style="width:90%">
                    <p>Sed ut perspiciatis omnis</p>
                </div>
                <div class="column">
                    <img src="images/gallery2.jpg" style="width:90%">
                    <p>Sed ut perspiciatis omnis</p>
                </div>
                <div class="column">
                    <img src="images/gallery3.jpg" style="width:90%">
                    <p>Sed ut perspiciatis omnis</p>
                </div>
            </div>
            <div class="row">
                <div class="column">
                    <img src="images/gallery1.jpg" style="width:90%">
                    <p>Sed ut perspiciatis omnis</p>
                </div>
                <div class="column">
                    <img src="images/gallery2.jpg" style="width:90%">
                    <p>Sed ut perspiciatis omnis</p>
                </div>
                <div class="column">
                    <img src="images/gallery3.jpg" style="width:90%">
                    <p>Sed ut perspiciatis omnis</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

 <style>
  .wholeprojects {
    padding-top: 5em;
    display: flex;
    justify-content: space-between;
    width: 85%;
    margin: 0px auto;
}
.textprojects {
    width: 25% !important;
}


.row {
    margin-top: 3em;
    width: 70%;
    float: right;
    display: flex;
  }
  
  .column {
    flex: 33.33%;
    padding: 5px;
    p {
        color: $textColorgrey;
        font-weight: 400;
        font-style: italic;
        font-size: 0.8em;
    }
    img {
        filter: brightness(95%);
        transition: transform 0.05s;
        &:hover {
            transform: scale(1.03);
        }
    }
  }

</style>

解决方案:

.wholeprojects …是画布宽度的85%。在这里面,你有 .textprojects.gallery. 前者为其父体宽度的25%。.wholeprojects意思是 .gallery 的75%的宽度。记住,这些都是你已经达到的85%的百分比,所以是总画布宽度的21.25%和63.75%)。

现在。.gallery.row中的,是其父体宽度的70%。作为 float: right这意味着,最左边的30%的 .gallery 是未使用的。这就是你的大差距。

解决,就给 .row a宽度为100%而不是70%。

给TA打赏
共{{data.count}}人
人已打赏
未分类

Agora安卓实例应用启动时崩溃

2022-9-10 9:32:43

未分类

更改视图后无法在IOS应用程序中禁用位置服务。

2022-9-10 9:43:41

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索