使三列 HTML 响应式

Question

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

当页面宽度变小的时候，我想让div竖排。

如何在 CSS 中完成？？

Answer 1

Fiddle 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>

Answer 2

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

或者您可以使用 bootstrap http://getbootstrap.com/

Answer 3

首先，对所有分区应用相同的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);

Answer 4

在 css 中，您可以使用媒体规则。例如，如果屏幕尺寸低于特定宽度，您可以设置新的 CSS 样式。在下面的例子中，一旦宽度低于 960px，它就设置为使用新的 css 规则。

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

这里是完整的fiddle：http://jsfiddle.net/pckphv38/

只需调整浏览器大小即可查看。

Answer 5

如果您不介意使用 bootstrap:

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

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

Answer 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>

Answer 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>

使三列 HTML 响应式

Making three-column HTML responsive

html

css

responsive-design