在一条线上的响应式div

我一直在为此奋斗了几天。我GOOGLE了很多，但无法找到正确的答案。我正在建立一个网站，并希望使其充分响应。在我的主页上，我有3块tekst（每个300宽）。在大于1000像素的屏幕上，它们居中。直到这一点，我没有任何问题。在一条线上的响应式div

但是，当屏幕变得更小，然后1000像素，我希望块在彼此之下，并在屏幕中心看到它。有关我的想法的示例，请访问http://www.t-mobile.nl。如果您将浏览器设置得更小，3个升级模块将自动更改为适合您的屏幕。

我也希望块一直在编队。或3块垂直或3块水平。一行不是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; 
    }

来源

2015-10-14 gertjan2805

看起来他们已经使用了媒体查询 – sinanspd

您需要使用媒体查询。但更好的选择将使用网格。这里是一个链接http://getbootstrap.com/css/#grid – sunitj

为一个完全响应网站，你应该使用'％'单位为您的CSS尺寸 –

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

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

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

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

希望这有助于

Chris

来源

2015-10-14 18:25:53

没有尝试Flexbox，但媒体查询工作得很好！感谢您的帮助:) – gertjan2805

您需要的是媒体查询 - 对于低于1000像素的任何东西（包括usive），你将要在100％设置宽度集装箱箱，是这样的：

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

所以，你不应该有固定的值箱中的任何元素。

来源

2015-10-14 18:41:16

谢谢！媒体查询工作得非常顺利！现在看起来很简单哈哈！ – gertjan2805

在一条线上的响应式div

回答

相关问题