使三列 HTML 响应式答案

【问题标题】：Making three-column HTML responsive使三列 HTML 响应式
【发布时间】：2015-07-29 10:35:03
【问题描述】：

我的页面宽度是 960 像素，我在上面有 3 个水平方向的 div，它们共同占据了 100% 的宽度。

当页面宽度减小时，我希望 div 以垂直方式排列。

如何在 CSS 中做到这一点？？

【问题讨论】：

使用CSS的媒体屏幕规则属性For More
你能显示你正在使用的当前 HTML/CSS 吗？
我已经回答了类似的问题。看看它。 stackoverflow.com/questions/30190626/…
我同意@media 规则，这是最简单、最专业的方式，不需要 JavaScript。看看我下面的答案。

标签： html css responsive-design

【解决方案1】：

如果您不介意使用bootstrap：

<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>

这将创建一个包含三个大小相等的响应列的行..

【讨论】：

您需要将类更改为 col-md-4，因为它当前显示的方式实际上会将其拆分为移动设备和桌面设备上的 3 列，这不是 OP 中要求的
我没有投反对票，因为这个家伙/女孩真的应该为此使用引导程序

【解决方案2】：

在 css 中，您可以使用媒体规则。例如，如果屏幕尺寸低于某个宽度，您可以设置新的 CSS 样式。在下面的情况下，一旦宽度低于 960 像素，它就会设置为使用新的 css 规则。

@media only screen and (max-width: 960px) {
    .test-div {
        float:none;
    }
}

这是一个完整的小提琴：http://jsfiddle.net/pckphv38/

只需调整浏览器的大小并查看。

【讨论】：

【解决方案3】：

小提琴Here

一种简单的方法是使用媒体查询来切换浮动属性。对于 body width > 960px，让它们向左浮动。否则，让它们像块一样正常排列。

div {
  width: 33.3333%;
  box-sizing: border-box;
  float: none;
  margin-bottom: 25px;
  padding: 25px;
}
span {
  display: block;
  height: 200px;
  background: red;
}
@media (min-width: 960px) {
  div {
    float: left;
  }
}

<div> <span></span>

</div>
<div><span></span>

</div>
<div><span></span>

</div>

【讨论】：

【解决方案4】：

为这 3 个 div 创建 div 将宽度设置为 100% 使用float: left; 和 position:relative; 在 css 中

或者你可以使用引导程序 http://getbootstrap.com/

【讨论】：

【解决方案5】：

首先，将相同的class 应用于所有部门。

<div class="nm">

然后，从How to get browser width using javascript code?，得到屏幕的宽度

function getWidth() {
  if (self.innerHeight) {
    return self.innerWidth;
  }

  if (document.documentElement && document.documentElement.clientHeight) {
    return document.documentElement.clientWidth;
  }

  if (document.body) {
    return document.body.clientWidth;
  }
}

然后根据宽度改变它。

var value = 400;
if(getWidth() < value){
  var foo = document.getElementByClassName("nm");
  for(var i=0, j=foo.length; i<j; i++){
    foo[i].style.float = "none";
  }
}

分解：

有一个函数来获取屏幕的宽度
遍历每个需要更改的元素
更改 CSS 以移除水平对齐方式。

此外，如果您想在用户拉伸或拉动浏览器时更改它，您可以创建一个setInterval 循环。

function doInterval(){
    var value = 400;
    if(getWidth() < value){
      var foo = document.getElementByClassName("nm");
      for(var i=0, j=foo.length; i<j; i++){
        foo[i].style.float = "none";
      }
    }
}

intv = setInterval(doInterval, 250);

【讨论】：

太复杂了。您可以简单地使用 css @media 规则来完成所有这些操作。

【解决方案6】：

CSS3中元素的排列方式

（IE10及更早版本无效）

<!DOCTYPE html>
<html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>demo</title>

        <style type='text/css'>
           #ctr {
              display: -webkit-flex;
              -webkit-flex-direction: column;
               display: flex;
               flex-direction: column;
            }

            .item {
                width:100px;
                height:100px;
                background-color:pink;
                margin:2px;
            }

            @media (min-width: 960px) {
                #ctr {
                    display: -webkit-flex;
                    -webkit-flex-direction: row;
                    display: flex;
                    flex-direction: row;
                }
            }
        </style>

    </head>
    <body>
      <div id="ctr">
        <div class="item">a</div>
        <div class="item">b</div>
        <div class="item">c</div>
        </div>
    </body>
</html>

【讨论】：

如果您打算用于多个部分，请使用class 而不是id。

【解决方案7】：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.wrap960{
    max-width: 960px;
    margin: 0 auto;    
}
.box{
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: top;
    width: 31%;
    min-width: 250px;
    margin: 1%;
    border: 2px solid #f00;
    min-height: 200px;
    text-align: center;
    line-height: 200px;
}


@media only screen and (max-width: 960px) {
    .box{
        display: block;
        margin: 1% auto 0 auto;
    }
}

<div class="wrap960">
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
</div>

【讨论】：