Question

我在论坛中找不到合适的答案，所以我打开了这个帖子来回答。我想在链接上创建...... 2 div（农民和农艺师）您可以在更改浏览器大小时调整大小。 http://www.agworld.com.au/?gclid=CjwKEAjwka67BRCk6a7_h_7Pui8SJABcMkWR_wNbB2t8jGf8Hs2bD2dnCBAB-MPmM2xAwMcyNvyhQhoC6sTw_wcB

但是当我调整大小时，我的div重叠了。如下

我的代码

<!-- Offer Posts -->
    <div class="text_container offer-background">
        <div class="offer-posts ">
            <div class="col-md-12 reason">
                <div class="verticalLine">                </div>

                <h1>What we offer</h1>
            </div>
            <div class="text_container">
                <!-- / .row -->
                <div class="col-md-3 col-sm-6 col-xs-12 right-pad">
                    <div class="card">
                        <img class="card-img-top" src="https://placeimg.com/500/300/any" data-src="..." alt="Card image cap">
                        <div class="card-block">
                            <h3 class="card-title">Postgres Support</h3>
                            <p class="card-text module line-clamp">We provide full 24/7 technical support for production PostgreSQL systems for your peace of mind. Let Fujitsu's PostgreSQL experts resolve your database problems while you focus on what you do best....
                            </p>
                            <a href="#" class="btn btn-explore text-left">explore</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12 right-pad">
                    <div class="card">
                        <img class="card-img-top" src="https://placeimg.com/500/300/any" data-src="..." alt="Card image cap">
                        <div class="card-block">
                            <h3 class="card-title">Services</h3>
                            <p class="card-text module line-clamp ">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-explore">explore</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12 right-pad">
                    <div class="card">
                        <img class="card-img-top" src="https://placeimg.com/500/300/any" data-src="..." alt="Card image cap">
                        <div class="card-block">
                            <h3 class="card-title">Trainning</h3>
                            <p class="card-text module line-clamp">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-explore">explore</a>

                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12 right-pad">
                    <div class="card">
                        <img class="card-img-top" src="https://placeimg.com/500/300/any" data-src="..." alt="Card image cap">
                        <div class="card-block">
                            <h3 class="card-title">Postgres Solutions</h3>
                            <p class="card-text module line-clamp">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-explore">explore</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- / .  -->
        </div>
        <!-- / .container -->
    </div>
    <!-- / .offer posts -->
    <!--  --

CSS代码

    /* ===== offer Posts ===== */
.offer-background {
    background-color: #f7f9f8;
}
.card {
    background-color: #ffffff;
    margin-top: 30px;
    margin-bottom: 40px;
    content: "";
    max-width: 314px;
    height: 467px;
    position: relative;
    display: table;
}
.card img {
    width: 100%;
}
.card-title {
    line-height: 1.5;
    margin-top: 0;
}
.card-block {
    padding: 5px;
}
.card-text {
    font-size: 20px;
    padding-top: 20px;
}
.card-text p {
    line-height: 1.7;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left!important
}
.right-pad {
    /*        padding-left: 10px;
*/
}
.module {
    width: 314px;
    margin: 0 0 1em 0;
    overflow: hidden;
}
.module p {
    margin: 0;
}
.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

/**/

感谢您提前获得帮助

Answer 1

您必须编写自己的媒体查询。这可以用3种方式编写。我希望它会对你有所帮助。

最小宽度为768px

@media (min-width:768px){
//your css code for screen larger than 768px goes here;
}

最大宽度为768px

@media (max-width:768px){
//your css code for screen smaller than 768px goes here;
}

最小宽度为500px至600px

@media screen (min-width:500px) & (max-width:600px;){
//your css code for screen larger than 500px & smaller than 600px goes here;
}

Answer 2

为您的卡类更新此信息：

import requests

url = "https://apis.synchroteam.com/Api/v1/User/list"

payload = "{\n    \"status\":\"1\"\n}"
headers = {
'content-type': "application/json",
'accept': "application/json",
'authorization': "Basic ZGVtbzoxMjEyOThucDIwMDM=",
'cache-control': "no-cache",
'postman-token': "1a3839b6-db5b-0c07-be1a-2816f491476c"
}

response = requests.request("GET", url, data=payload, headers=headers)

print(response.text)

Answer 3

删除此width＆amp;为img img-responsive

添加此类

.module {
    /* width: 314px; */ /*Remove this width*/
     margin: 0 0 1em 0;
    overflow: hidden;
}

https://jsfiddle.net/aerms5dv/3/

Answer 4

您在问题中提供的示例是使用twitter bootstrap开发的。您只需在代码中加入<div class="row"></div>，并在列之前遗漏一个sudo apt-get install jruby。

更新了Fiddle here

如何使用浏览器大小单独调整div的大小？

4 个答案: