Question

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

以下是我的问题：

我有4列全尺寸的照片，但是当我最小化浏览器时，它会得到这个丑陋的定位..我想让正确的照片浮动，但是如果我设置了它，它们会很糟糕全尺寸。

我的问题是：当您最小化浏览器时，是否可以更改组件浮动？我希望所有4张照片以完整尺寸向左浮动，第一张照片向左浮动，第二张照片向左浮动，只有2列，当我只有一列非常小的时候，我希望照片居中。 / p>

这是我的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

Answer 2

您应该使用@media选择器进行此类操作，您可以在其中设置浏览器宽度的样式，以便您具有以下内容：

@media screen and (min-width:1200px) {
    //your style here
}

您可以阅读有关此here

的更多信息

最小化列（CSS）时更改定位

2 个答案: