文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用css对齐页面中的卡片

问使用css对齐页面中的卡片
EN

Stack Overflow用户
提问于 2020-10-19 13:45:53
回答 1查看 87关注 0票数 0

我用css、html和引导3制作了4张卡。出于某种原因，第一行没有我想要的3张卡，但第2行是，当我放大(像素差).What时，它们没有完全对齐。你在我的4张未对齐卡下面有一个img。以下是代码：

HTML：

<div class="row"> <div class="card col-lg-4 col-md-6"> <div class="front"> <div> <img class="girlimg" src="girl.jpg" alt="asdasda" /> <h2 class="activname">Guided hiking tours</h2> <button class="activbutt" type="button" name="button"> SEE DETAILS </button> </div> <div class="details"> <div class="duration"> <i class="fas fa-clock">Duration</i> </div> <div class="people"> <i class="fas fa-user-friends"></i><br /> <p>Max adults:10</p> </div> <div class="kids"> <i class="fas fa-child"></i><br /> <p>Max children:3</p> </div> </div> </div> </div> </div> <br /> <div class="col-lg-4 col-md-6 pop-up-2"> <div class="front"> <div> <img class="girlimg" src="bike.jpg" alt="asdasda" /> <h2 class="activname">Rent a bike(4 hours)</h2> <button class="activbutt" type="button" name="button"> SEE DETAILS </button> </div> <div class="details"> <div class="duration"> <i class="fas fa-clock">Duration <p>QUARTER DAY</p> </i> </div> <div class="people"> <i class="fas fa-user-friends"></i><br /> <p>Max adults:9</p> </div> <div class="kids"> <i class="fas fa-child"></i><br /> <p>Max children:0</p> </div> </div> </div> </div> </div> <br> <div class="col-lg-4 col-md-6 pop-up-2"> <div class="front"> <div> <img class="girlimg" src="climbing.jpg" alt="asdasda" /> <h2 class="activname">Climbing</h2> <button class="activbutt" type="button" name="button"> SEE DETAILS </button> </div> <div class="details"> <div class="duration"> <i class="fas fa-clock">Duration <p>FULL DAY</p> </i> </div> <div class="people"> <i class="fas fa-user-friends"></i><br /> <p>Max adults:5</p> </div> <div class="kids"> <i class="fas fa-child"></i><br /> <p>Max children:1</p> </div> </div> </div> </div> </div> <br> <div class="col-lg-4 col-md-6 pop-up-2"> <div class="front"> <div> <img class="girlimg" src="canoe.jpg" alt="asdasda" /> <h2 class="activname">Canoe</h2> <button class="activbutt" type="button" name="button"> SEE DETAILS </button> </div> <div class="details"> <div class="duration"> <i class="fas fa-clock">Duration <p>QUARTER DAY</p> </i> </div> <div class="people"> <i class="fas fa-user-friends"></i><br /> <p>Max adults:6</p> </div> <div class="kids"> <i class="fas fa-child"></i><br /> <p>Max children:2</p> </div> </div> </div> </div> </div>

CSS：

[![> .front{

边缘-顶部: 30%；宽度:750 max；背景颜色：#F7F4F2；对齐-项目:基线；边-左: 20%；位置:相对；边界-半径: 10%；对齐-自我:弯曲-开始；} .girlimg{最大宽度:500 max；最小-高度:475 max；边框半径: 10%；} .details{显示:挠曲；弯曲方向:列；对齐-内容:空间-周围；内容:空格；位置:绝对；顶部:0；右:0；边距-左：%；边距-顶部: 15%；字体大小:30 15；} .duration{边距-底部: 25%；} .people{边距-底部: 25%；} .kids{边距-底部: 25%；} .activname{显示:弯曲；弯曲方向:行；边距-左: 7%；边距-底部: 5%；字体大小:45 20；} .activbutt{背景颜色：#ffcc66 66；边框-半径: 2%；显示:弯曲；边距-左: 20%；字体大小:30 20；填充:20 20；边框:0}；

我的四张卡片的图片：

https://i.stack.imgur.com/6kDFU.png

flexbox
html
css
EN

回答 1

Stack Overflow用户

发布于 2020-10-19 16:57:32

我从您的代码中删除了不必要的空白。请检查一下这个片段。

​

代码语言：javascript
复制
.front {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #F7F4F2;
    position: relative;
    margin-bottom: 15px;
}

.details{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.activname{
    font-size: 20px;
}

.activbutt{
    background-color: #ffcc66;
    text-align: center;
    padding: 10px;
    border: none;
}
代码语言：javascript
复制
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="row">
    <div class="card col-lg-4 col-md-6">
        <div class="front">
            <div style="text-align: center;">
                <img class="girlimg" src="girl.jpg" alt="asdasda" />
                <h2 class="activname">Guided hiking tours</h2>
                <button class="activbutt" type="button" name="button">
                    SEE DETAILS
                </button>
            </div>
            <div class="details">
                <div class="duration">
                    <i class="fas fa-clock">Duration</i>
                </div>
                <div class="people">
                    <i class="fas fa-user-friends"></i><br />
                    <p>Max adults:10</p>
                </div>
                <div class="kids">
                    <i class="fas fa-child"></i><br />
                    <p>Max children:3</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-12"></div>
    <div class="col-lg-4 col-md-6 pop-up-2">
        <div class="front">
            <div style="text-align: center;">
                <img class="girlimg" src="bike.jpg" alt="asdasda" />
                <h2 class="activname">Rent a bike(4 hours)</h2>
                <button class="activbutt" type="button" name="button">
                    SEE DETAILS
                </button>
            </div>
            <div class="details">
                <div class="duration">
                    <i class="fas fa-clock">Duration
                        <p>QUARTER DAY</p> </i>
                </div>
                <div class="people">
                    <i class="fas fa-user-friends"></i><br />
                    <p>Max adults:9</p>
                </div>
                <div class="kids">
                    <i class="fas fa-child"></i><br />
                    <p>Max children:0</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 pop-up-2">
        <div class="front">
            <div style="text-align: center;">
                <img class="girlimg" src="climbing.jpg" alt="asdasda" />
                <h2 class="activname">Climbing</h2>
                <button class="activbutt" type="button" name="button">
                    SEE DETAILS
                </button>
            </div>
            <div class="details">
                <div class="duration">
                    <i class="fas fa-clock">Duration
                        <p>FULL DAY</p> </i>
                </div>
                <div class="people">
                    <i class="fas fa-user-friends"></i><br />
                    <p>Max adults:5</p>
                </div>
                <div class="kids">
                    <i class="fas fa-child"></i><br />
                    <p>Max children:1</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 pop-up-2">
        <div class="front">
            <div style="text-align: center;">
                <img class="girlimg" src="canoe.jpg" alt="asdasda" />
                <h2 class="activname">Canoe</h2>
                <button class="activbutt" type="button" name="button">
                    SEE DETAILS
                </button>
            </div>
            <div class="details">
                <div class="duration">
                    <i class="fas fa-clock">Duration
                        <p>QUARTER DAY</p> </i>
                </div>
                <div class="people">
                    <i class="fas fa-user-friends"></i><br />
                    <p>Max adults:6</p>
                </div>
                <div class="kids">
                    <i class="fas fa-child"></i><br />
                    <p>Max children:2</p>
                </div>
            </div>
        </div>
    </div>
</div>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/64428695

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档