如何在响应式网页设计中将中间内容放在首位

时间：2014-05-31 13:10:07

标签： html css responsive-design

我在div中有一个3 div，名为left-content，middle-content，right-content。我想要的是，在响应式设计中，中间内容必须位于顶部和左侧内容，右侧内容低于中间内容。这是我的代码：

 <div id="content">
    <div id="left-content">
        <p>
            <b>
                Lorem ipsum dolor sit amet,
                consectetuer adipiscing elit, sed
                diam nonummy nibh euismod
                tincidunt ut laoreet dolore magna
                aliquam erat volutpat. Ut wisi enim
                ad minim veniam, quis nostrud
                exerci tation ullamcorper suscipit
                lobortis nisl ut aliquip ex ea
                commodo consequat.
            </b>
        </p>
    </div>
    <div id="middle-content">
        <img src="img/img1.jpg" />
    </div>
    <div id="right-content">
            <p>
                Lorem ipsum dolor sit amet,
                consectetuer adipiscing elit, sed
                diam nonummy nibh euismod
                tincidunt ut laoreet dolore magna
                aliquam erat volutpat. Ut wisi enim
                ad minim veniam, quis nostrud
                exerci tation ullamcorper suscipit
                lobortis nisl ut aliquip ex ea
                commodo consequat.
        </p>
    </div>
</div>


 css code:


   body{
     margin:0;
     padding 0;
    }
    #content{
      width:900px;
      height:auto;
      overflow:hidden;
      margin:0 auto;
       margin-bottom:20px;
    }
    #left-content{
      width:200px;
      height:auto;
       float:left;
    }
    #middle-content{
      width:500px;
       height:auto;
        float:left;
   }
    img{
      width:100%;
       height:auto;
    }
     #right-content{
      width:200px;
      height:auto;
      float:left;
      }
     @media (max-width:480px){
   #content{
    width:90%;
    height:auto;
    margin:0 auto;
  }
  #left-content{
    width:100%;
    height:auto;
    float:left;
    text-align:justify;
}
#middle-content{
    width:100%;
    height:auto;
    float:right;
}
 #right-content{
    width:100%;
    height:auto;
    float:left;
}

}

帮助。

4 个答案:

答案 0 :(得分：0)

您可以使用display:flex;和mediaquerie。 DEMO set at 500px 

#content {
  display:flex;
}
 #content>div {
   flex:1;
 }
img {
  width:100%;
}
@media only screen and (max-width:500px){
  #content {
    flex-direction:column;
  }
  #content > div {
    order:2;
  }
  #content  #middle-content {
    order:1;
    width:100%;
  }
}

答案 1 :(得分：0)

试试这个：http://plnkr.co/edit/QfY8pf?p=preview 我为顶级中间内容创建了一个单独的div，它以常规大小隐藏，并在媒体标记中可见。将预览窗格调整为480px以下以查看效果。

使用像flex这样的东西的问题是只有非常新的浏览器才能显示它。大多数浏览器都不知道它在谈论什么。 （请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/flex浏览器兼容性。）

Media IE本身仅支持自IE 9.因此您可能希望使用javascript解决方案。我很快就会发布一个编辑。

修改

您可以尝试这样的事情： （或者，如果您想要更加一致和可靠的解决方案，请查看Bootstrap。）

<!DOCTYPE html>
<html>

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
      (
        function($){
          var currentWidth = 0;

          var check = function() {
            var newWidth = window.innerWidth;
            if(currentWidth != newWidth) {
              currentWidth = newWidth;                 
              if(currentWidth < 480) {
                $('#middle-content').empty();
                $('#top-content').html($('#moveable').html());
                $('#left-content, #middle-content, #right-content').removeClass('floatLeft');
              }
              else {
                $('#middle-content').html($('#moveable').html());
                $('#top-content').empty();
                $('#left-content, #middle-content, #right-content').addClass('floatLeft');
              }
            }
          }

          setInterval(check, 300);
        }
      )(jQuery)
    </script>
    <link rel="stylesheet" href="style.css" />
    <style>
      .floatLeft {
        float:left;
      }

      #left-content {
        width:auto;
      }
      #middle-content {
        width:auto;
      }
      #right-content {
        width:auto;
      }
      #left-content.floatLeft,
      #right-content.floatLeft {
        width:200px;
      }
    </style>
  </head>

  <body>
    <script type="text/template" id="moveable">
      <div id="moveable-content"><h1>Middle Content</h1></div>
    </script>
    <div id="top-content"></div>
    <div id="left-content">
      <p>
        <b>
          Lorem ipsum dolor sit amet,
          consectetuer adipiscing elit, sed
          diam nonummy nibh euismod
          tincidunt ut laoreet dolore magna
          aliquam erat volutpat. Ut wisi enim
          ad minim veniam, quis nostrud
          exerci tation ullamcorper suscipit
          lobortis nisl ut aliquip ex ea
          commodo consequat.
        </b>
      </p>
    </div>
    <div id="middle-content"></div>
    <div id="right-content">
      <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
      ea commodo consequat.
    </p>
    </div>

  </body>
</html>

答案 2 :(得分：0)

body{
height:100%;
  width:100%;
  margin:0;
  padding:0;
}

#content{
  position:relative;
  background:#dedede;
height:100vh;
}

#left-content{
border:1px solid red;
position:absolute;
bottom:0;
}

#right-content{
border:1px solid green;
position:absolute;
}

这里是JSFiddle。

我认为你不能用纯CSS来实现这个目标，因为中等内容正好在中间。

如果发生任何窗口调整大小，您可能还想触发此操作。

答案 3 :(得分：0)

非基于flex的非javascript，完全css解决方案 IS 可能。以下是各部分，最后的解释是：

<强> CSS： 

body{
    margin:0;
    padding 0;
}
#content{
    width:100%;
    max-width: 900px;
    height:auto;
    overflow:hidden;
    margin:0 auto;
    margin-bottom:20px;
}
#content:after{
    clear: both;
}
#left-content{
    width: 33.33333%;
    float:left;
    left: 33.33333%;
    position: relative;
}
#middle-content{
    width: 33.33333%;
    float:left;
    right: 33.33333%;
    position: relative;
}
img{
    width:100%;
    height: auto;
}
#right-content{
    width: 33.33333%;
    float:left;
    position: relative;
}
@media (max-width:480px){
    #content{
        width:90%;
        margin:0 auto;
    }
    #left-content{
        width: 100%;
        text-align:justify;
        left: 0;
    }
    #middle-content{
        width:100%;
        left: 0;
    }
    #right-content{
        width: 100%;
    } 
}

<强> HTML： 

<div id="content">
    <div id="left-content">
        <img src="img/img1.jpg"/>
    </div>
    <div id="middle-content">
        <p>
            <b>
                Lorem ipsum dolor sit amet,
                consectetuer adipiscing elit, sed
                diam nonummy nibh euismod
                tincidunt ut laoreet dolore magna
                aliquam erat volutpat. Ut wisi enim
                ad minim veniam, quis nostrud
                exerci tation ullamcorper suscipit
                lobortis nisl ut aliquip ex ea
                commodo consequat.
            </b>
        </p>
    </div>
    <div id="right-content">
            <p>
                Lorem ipsum dolor sit amet,
                consectetuer adipiscing elit, sed
                diam nonummy nibh euismod
                tincidunt ut laoreet dolore magna
                aliquam erat volutpat. Ut wisi enim
                ad minim veniam, quis nostrud
                exerci tation ullamcorper suscipit
                lobortis nisl ut aliquip ex ea
                commodo consequat.
        </p>
    </div>
</div>

好的，正如其他人已经建议的那样，如果你有一个相当复杂的设计，你可能应该考虑使用像Bootstrap或Foundation这样的响应式框架（或者如果你没有这些框架提供的所有优点，那么你可以只使用他们的网格组件）。如果您不想出于某种原因使用框架，您至少可以从他们的工作方式中学习，其中一个提供的方法是推/拉网格列以更改显示顺序。这正是我在这里所做的：

  1. 我更改了您的源订单，以反映您希望它在最小设备尺寸上的内容。因此，您会注意到该图片现在位于left-content列中。
  2. 我使用媒体查询在小于480px的视口上为列提供了100％的宽度。这样，每列将是这些设备上content div的全宽。将媒体查询中的max-width更改为您想要的任何内容。
  3. 然后，我指定列应该只有33.33333％宽（是的，我使用百分比使其更流畅，但如果您愿意，可以使用相同的固定宽度技术）在媒体查询之外并浮动他们所有左。
  4. 通过将它们全部浮动，您可以使用定位来偏移列并逐字更改显示顺序。所以，我给每个列位置相对，在left-content列上我将左值设置为33.33333％。这基本上是推动＆＃34;列的剩余量与我们希望它占据的列宽相同。然后，我将middle-content列的正确值发送到33.33333％，其中＆＃34;拉出＆＃34;左边的这一列占据了另一列所在的空间。

    5. 这里有fiddle来展示它是如何运作的。

相关问题
最新问题