Question

我希望底部的按钮都排成一行。 Cards Not Lining up

我一直在尝试按照此处的说明开始工作：Align two buttons at the bottom

但我仍然无法让它正常工作。因为我的卡没有与链接文本一起成长。如果我运行它，卡在示例中没有正确显示，但它正在使用codepen。

继承我的代码：



#outer-div {
   height: 80px;
   width: 100px;
   border: 1px solid red;
}
#first-div {
   width: 50%;
   height: 100%;
   border-right: 2px solid #619e38;
   float: left;
}
#cell-icon {
   border: 1px solid blue;
   display: inline-block;
   margin-left: -35px;
   margin-top: 28px;
}

Answer 1

请检查下面提到的解决方案。希望它会对你有所帮助。

＆＃13;

    h1 {
        font-size: 38pt;
    }

    p {
        font-size: 17pt;
    }

    .card {
        text-align: center;
        background-color: green;
        border-style: unset;
        position: relative;
        margin-bottom: 40px;
        height: 150px;
    }

    .card-links {
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
    }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="section2">
    <div class="container">
        <div class="maintext">
            <h1>Our Vision</h1>
        </div>
        <div class="subtext">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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 class="row">

            <div class="col-md-4 col-md-4 col-sm-12">
                <div class="card">
                    <div class="images">
                        <img src="" alt="" width="80" height="80">
                    </div>
                    <h2>Some Text Over Here
                        <BR>
                    </h2>
                    <div class="card-links" class="card1">
                        <a href="#">Watch Video</a>
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-md-4 col-sm-12">
                <div class="card">
                    <div class="images">
                        <img src="">
                    </div>
                    <h2>Even More Text.
                        <BR>Over Here Blah BLah</h2>
                    <div class="card-links" id="card2">
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-md-4 col-sm-12">
                <div class="card">
                    <div class="images">
                        <img src="">
                    </div>
                    <h2>Some & Text
                        <BR>
                    </h2>
                    <div class="card-links" id="card3">
                        <a href="#">Watch Now</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

在列中对齐链接/按钮

1 个答案: