Question

我几天来一直在努力争取这个。我google了很多但找不到合适的答案。我正在建立一个网站，并希望使其完全响应。在我的主页上，我有3块tekst（每个300宽）。在大于1000像素的屏幕上，它们居中。在此之前我没有任何问题。

但是当屏幕变得小于1000像素时，我希望这些块在彼此之下，并且从屏幕中央看到它。有关我的想法的示例，请访问http://www.t-mobile.nl。如果您使浏览器变小，则3个促销区块将自动更改以适合您的屏幕。

我也希望这些块一直在形成。或3块垂直或3块水平。在1行上不是2个块，在它们下面的行上是另一个。

我尝试将div容器设置为宽度：60％但是我在较小的屏幕上左侧有一个很大的空间。这些街区也没有像我希望的那样排队。

我做了一个我已经拥有的部分的JSFiddle。您可以在此处访问：https://jsfiddle.net/gertjan2805/vj0grfpy/

有谁知道如何解决这个问题？这将是一个很大的帮助:)

这是我的HTML：

<div class="container">
<div class="containersmall">
    <div class="top">DIV Test</div>
    <div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
</div>
<div class="containersmall">
    <div class="top">DIV Test</div>
    <div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
</div>
<div class="containersmall">
    <div class="top">DIV Test</div>
    <div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</div>
</div></div>

    body {
background-color: #EDEDED;
font-family: 'Verdana';
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
    }
    .container {
         width: 1005px; /*1005px or 59%*/
         margin: auto;
         position: relative;
         text-align:center;
    }
    .containersmall {
         width: 310px;
         float: left;
         margin-left: 25px;
    }   
    .top {
        width: 310px;
        background-color: #67B3BD;
        text-align: center;
        font-size: 22px;
        color: #FFFFFF;
        height: 50px;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px#888;
        box-shadow: 0 0 5px #888;
        margin: auto;
        padding-top: 20px;  
        float: left;
    }
    .text {
        width: 300px;
        text-align: justify;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px #888;
        box-shadow: 0 0 5px #888;
        margin: auto;
        padding: 5px;
        background-color: #FFFFFF;
        float: left;
    }

Answer 1

有两种方式：媒体查询或flexbox。

对于媒体查询，这样的事情可能就足够了（未经测试）：

@media (max-width : 1000px){
   .containersmall {
                clear:both;
                width:100%;
   }
}

对于flexbox，我将向您推荐一个教程：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

希望这有帮助，

克里斯

Answer 2

您需要的是媒体查询 - 对于低于1000px（含）的任何内容，您需要将宽度容器框设置为100％，如：

@media only screen and (max-width: 1000px) {
    .container {
        width: 100%;
    }
    .containersmall {
        width: 100%;
    }
    .top {
        width: 100%;
    }
    etc...
}

因此，框内的任何元素都没有固定值。

响应div在一条线上

2 个答案: