Question

我的页面宽度是960px，并且我以水平方式有3个div，它们共同占据宽度的100％。

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

我怎么能在CSS中做到？

enter image description here

Answer 1

如果您不介意使用bootstrap：

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

这将创建一个具有三个大小相同的响应列的行。

Answer 2

小提琴Here

一种简单的方法是使用媒体查询切换float属性。对于体宽> 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 3

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

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

Answer 4

首先，对所有部门应用相同的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 5

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

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

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

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

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

＆＃13;

*{
    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;
    }
}

＆＃13;

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

＆＃13;

制作三列HTML响应

7 个答案: