我有这个HTML / CSS代码:



.container
{
  max-width: 900px;
  margin: 0 auto;
  margin-top: 30px;
}
.divisions
{
  border: 1px solid Black;
}

.Fisrt-Line
{
  height: 180px;

}
.First
{
  background-color: Green;
  width: 32.2%;
}
.Second
{
  width: 65%;
  background-color: White;
  margin-left: 20px;
}
.Second-Line
{
  margin-top: 20px;
  background-color: Blue;
  float: left;
  width: 100%;
  height: 180px;
}

.Third-Line
{
  height: 180px;
  width: 31.6%;
  float: left;
  margin-top: 20px;
}
.Third-2
{
  margin-left: 20px;
  background-color: Red;
}
.Third-3
{
  margin-left: 20px;
}

<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link href="Styles/StyleSheet.css" rel="stylesheet" />
  </head>
  <body class="container">
    <div class=" divisions Fisrt-Line First">
      1</div>
    <div class=" divisions Fisrt-Line Second">
      2</div>
    <div class="divisions Second-Line">
      3
    </div>
    <div class="divisions Third-Line">
      4
    </div>
    <div class="divisions Third-Line Third-2">
      5
    </div>
    <div class="divisions Third-Line Third-3">
      6
    </div>

  </body>
</html>





当我最小化浏览器时,第二个div和最后一个div跳到下一行。但是我不要

我应该如何编辑代码,以使这些划分变小而不跳转到下一行?

最佳答案

您介意为行添加其他包装吗?如果没有,请在这里http://jsfiddle.net/ch0L9fy8/2/

行更新程序旁边的主要更新:

.divisions-line {
  width: 100%;
}
.divisions {
  box-sizing: border-box;
  border: 1px solid Black;
}

09-11 19:09
查看更多