Question

我试图为响应式网站浮动div并且它无法正常工作。我需要它们按照下面的顺序排列，因为当屏幕变小时，它们需要在顶部堆叠1，然后在2，3堆叠。第三个div在第一个div下面不能很好地进行。任何帮助表示赞赏！

<div class="1">info</div>
<div class="2">info</div>
<div class="3">info</div>

.1 {
width:23%;
float:right;
}
.2 {
width:76%;
float:left;
}
.3 {
float:right;
width:23%;
}

同样，为了清楚起见，我需要＆＃34; 3＆＃34;在...＆＃34; 1＆＃34;但它正在下面＆＃34; 2＆＃34;。谢谢！

Answer 1

Css Class不应以数字开头。

Demo

.one {
width:23%;
float:right;
}
.two {
width:76%;
float:left;
}
.three {
float:right;
width:23%;
}

Answer 2

我想这就是你想要的Demo

  * {
      box-sizing: border-box;
  }
  .one {
      width:23%;
      float:left;
    background-color: #333;
  }
  .two {
      width:76%;
      float:left;
      background-color: #666;
  }
  .three {
      float:left;
      width:23%;
      background-color: #ddd;
  }

Answer 3

我猜使用内联块会起作用。即使您在没有宽度百分比的情况下调整窗口大小。

.one {
    width:23%;
    display: inline-block;
    color: yellow;

}
.two {
    width:76%;
    display: inline-block;
    color: orange;
}
.three {
    display: inline-block;
    color: red;
    width:23%;
}

Demo

Answer 4

你的代码是正确的，除了css-classes不能启动或只包含一个数字。 DIV.two不会浮动：

<div class="one">info 1</div>
<div class="two">info 2</div>
<div class="three">info 3</div>

和css：

.one {
width:23%;
float:right;
background-color: yellow;
}
.two {
width:76%;
background-color: grey;
}
.three {
float:right;
width:23%;
background-color: red;
}

See the fiddle

响应网站的浮动div

4 个答案: