Question

当宽度存在时，并排显示内容的最佳做法是：

[内容] [内容] [内容] [内容]

但是当屏幕尺寸不够大时，内容会自动堆叠：

[内容]

我想以最简单的方式执行此操作，而无需加载诸如bootstrap之类的框架。如果有帮助，我的内容确实使用jQuery。

我的应用程序是一个移动HTML网站，在平板电脑或台式电脑等大屏幕上也需要看起来不错。我的内容将在div中。

如果它第一次去，那就太好了：

[content] [content]

Answer 1

你想要这种行为。

如果是，则float是您应该寻找的css属性

Check Demo

Answer 2

您需要使用媒体查询来实现这一目标。

Google for CSS Media Queries

Answer 3

有两种可能的方法来实现这个目标

a）使用min-width＆amp; float：left property

min-width将确保您的div不会小于指定的大小＆amp;向左浮动将确保如果有div元素的空间它可以上升

        <html>
         <head>
         <style type='text/css'>
         body{
          width:100%;
          height:100%;

         }
         body div{
          float:left;
          width:33%;
          height:200px;
          min-width:200px; 
         }
            .width1{
             background-color:red;
            }
            .width2{
             background-color:green;
            }
            .width3{
             background-color:blue;
            }
         </style>

         <body>


           <div class="width1"></div>
           <div class="width2"></div>
           <div class="width3"></div>

         </body>

         </html>

b）第二种更有效的方法是使用媒体查询

        <html>
         <head>
          <style type='text/css'>
         body{
          width:100%;
          height:100%;

         }
         body div{
          float:left;
          width:33%;
          height:200px;
         }
            .width1{
             background-color:red;
            }
            .width2{
             background-color:green;
            }
            .width3{
             background-color:blue;
            }

         @media only screen and (max-width: 800px) { /* for 640px screen set size of div to 50%; */
          body div{
           width:50%;
          }
         }

          @media only screen and (max-width: 480px) { /* for smaller screen set size of div to 100%; */
          body div{
           width:100%;
          }
         }
         </style>

         <body>


           <div class="width1"></div>
           <div class="width2"></div>
           <div class="width3"></div>

         </body>

         </html>

水平显示内容，但在屏幕宽度不允许时堆叠

3 个答案: