Question

请浏览Bootply此处

当div文字相当大时，我无法统一安排a个容器。

检查示例中的第三个容器。它扭曲了整体的外观和感觉。

Answer 1

尝试将vertical-align: top;添加到.category。见这里：

http://www.bootply.com/4RnKOuqejz

/* CSS used here will be applied after bootstrap.css */
    .category {
        vertical-align: top;
        display: inline-block;
        font-weight: bold;
        width: 18%;
        /*height: 40%;*/
    }

    .categoryContainer .category img {
        width: 190px;
        height: 150px;
    }

    .categoryContainer .category a {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

        .categoryContainer .category a:hover {
            color: #DC5034;
        }

    .categoryContainer .category .fa-play {
        padding-left: 6px;
        font-size: 8px;
        text-align: center;
        color: #DC5034;
        vertical-align: middle;
        padding-right: 8px;
    }

    .categoryContainer .category p {
        font-size: 12px;
        font-weight: normal;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="categoryContainer" style="width:100%">
                    <div class="category">
                        <div class="imageContainer">
                            <img src="" class="img-responsive">
                            <a class="noHover" href="https://www.google.com/">Property 1</a><i class="fa fa-play"></i>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p>
                        </div>
                    </div>
                    <div class="category" style="height:40%">
                        <div class="imageContainer">
                            <img src="" class="img-responsive">
                            <a>Property 2</a><i class="fa fa-play"></i>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p>
                        </div>
                    </div>
                    <div class="category" style="height:40%">
                        <div class="imageContainer">
                            <img src="" class="img-responsive">
                            <a>A very big property name that distorts the uniformity</a><i class="fa fa-play"></i>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p>
                        </div>
                    </div>
                    <div class="category" style="height:40%">
                        <div class="imageContainer">
                            <img src="" class="img-responsive">
                            <a>Property 4</a><i class="fa fa-play"></i>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p>
                        </div>
                    </div>
                    <div class="category" style="height:40%">
                        <div class="imageContainer">
                            <img src="" class="img-responsive">
                            <a>Property 5</a><i class="fa fa-play"></i>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p>
                        </div>
                    </div>
                    <div class="category" style="height:40%">
                        <div class="imageContainer">
                            <img src="" class="img-responsive">
                            <a>Property 6</a><i class="fa fa-play"></i>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p>
                        </div>
                    </div>
                    <div class="category" style="height:40%">
                        <div class="imageContainer">
                            <img src="" class="img-responsive">
                            <a>Property 7</a><i class="fa fa-play"></i>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p>
                        </div>
                    </div>
                    <div class="category" style="height:40%">
                        <div class="imageContainer">
                            <img src="" class="img-responsive">
                            <a>Property 8</a><i class="fa fa-play"></i>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

Answer 2

如果您的页面是动态的，那么您可以限制要打印的字符数。

但如果它是静态的，那么你想要写一个更短的标题或者让div更高的行。

统一对齐容器 - html / css

2 个答案: