jquery - 最小化列时更改定位 (CSS)

Question

我是 HTML 和 CSS 的新手，我尝试做一个简单的网站。

这是我的问题:

我有 4 列全尺寸照片，但是当我最小化浏览器时，它的位置很丑。我希望正确的照片向右浮动，但如果我设置它，当它们 float 时会很糟糕全尺寸。

我的问题是:最小化浏览器时是否可以更改组件 float ？我希望所有 4 张照片以全尺寸向左浮动，第一张向左浮动，第二张向右浮动，只有 2 列，当我只有一列非常小的尺寸时，我希望照片居中。

这是我的 HTML:

<div class="container panel panel-default mygallery">
<div class="panel-heading text-center"><big class="h3">Most popular</big></div>
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="panel panel-default mypanel">
                <div class="panel-heading">
                    <a data-toggle="collapse" href="#">
                        <h4> Mozart apartment.</h4>
                    </a><small>Nr. camere: 3</small></br>
                        <small>Pret: 200.000 <div class="glyphicon glyphicon-euro"></div></small></br>
                        <small>Suprafata: 130 m<sup>2</sup></small>
                </div>
                <div class="panel-body in img-1"></div>
            </div>
        </div>
</div>
</div>

所有 4 列都有相同的代码，只有信息不同。

和 CSS:

.mygallery {
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 20px;
    margin-right: 20px;
    height: auto;
    width: auto;
}

.mypanel {
    float:left;
    overflow: hidden;
    border-style: solid;
    border: 10px;
    height: 320px;
    width: 100%;
    max-width: 320px;
}

.img-1 {
    background: url("MostPopular/1.jpg");
    background-repeat: no-repeat;
    border-style: solid;
    border-color: white;
    border-radius: 10px;
    width: 100%;
    height: 65%;
}

Answer 1

在这里使用媒体查询是可能的，你可以了解更多关于它的信息

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

您可以为不同尺寸添加特定的 CSS。

您可以使用 :nth-child() 为不同的列提供不同的样式

https://www.w3schools.com/cssref/sel_nth-child.asp