Question

希望有人可以在这里提供帮助 - 一直想让这个工作一段时间而无处可去。

我正在玩一个简单的（或似乎看起来）CSS \ HTML布局，左边会显示一个大的（500px）框，旁边会显示六个较小的（250px）框。像这样：

|----|--|--|--|
|    |  |  |  |
|    |--|--|--|
|    |  |  |  |
|----|--|--|--|

但无论我如何尝试，第二排较小的盒子总是跳到较大的盒子下面，而不是坐在第一排下面。更像这样：

|----|--|--|--|
|    |  |  |  |
|    |--|--|--|
|    |
|----|---
|  |  |  |
|__|__|__|

我在下面复制了我的标记 - 我可能在这里遗漏了一些非常明显的东西，所以任何帮助都会受到欢迎（这里的虚线边框更符合我自己的理智，所以我可以看到每个DIV的布局）

#contentbox {
    max-width:1300px;
    border:1px dashed blue;
    text-align:center;
    font-size:0;
    margin: 4% auto;
}
#bigbox {
    width:500px;
    height:500px;
    border:1px dashed blue;
    display:inline-block;
}
#box {
    width:250px;
    height:250px;
    border:1px dashed blue;
    display:inline-block;
    vertical-align:top;
}

<!DOCTYPE html>

<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">

    <title></title>
</head>

<body>
    <div id="contentbox">
        <div id="bigbox"></div>
        <div id="box"></div>
        <div id="box"></div>
        <div id="box"></div>
        <div id="box"></div>
        <div id="box"></div>
        <div id="box"></div>
    </div>

</body>

</html>

JSFiddle

Answer 1

您可以使用float代替inline-block。此外，ID必须是唯一的使用类名，而不是引用多个元素：

＆＃13;

#contentbox {
  width: 1000px;
  border: 1px dashed blue;
  text-align: center;
  font-size: 0;
  margin: 4% auto;
}
.bigbox {
  width: 500px;
  height: 750px;
  border: 1px dashed blue;
  float: left;
  box-sizing: border-box;
}
.box {
  box-sizing: border-box;
  width: 250px;
  height: 250px;
  border: 1px dashed blue;
  float: left;
}
/*Clear Floats*/
#contentbox:after {
  content: " ";
  display: Table;
  clear: both;
}

＆＃13;

<div id="contentbox">
  <div class="bigbox"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

＆＃13;

Answer 2

使用另一个div来包装两个垂直框可能会解决您的问题。

这里我使用另一个叫做box_wrapper的Div，宽度为250，高度为500.这个div包含2个盒子，所以它们可以垂直排列。

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">

<title></title>
</head>

<body>
<div id="contentbox">
    <div id="bigbox"></div>
    <div id="box_wrapper">
        <div id="box"></div>
        <div id="box"></div>
    </div>
    <div id="box_wrapper">
        <div id="box"></div>
        <div id="box"></div>
    </div>
    <div id="box_wrapper">
        <div id="box"></div>
        <div id="box"></div>
    </div>
</div>
</body>
</html>

css代码：

#contentbox {
    max-width:1300px;
    border:1px dashed blue;
    text-align:center;
    font-size:0;
    margin: 4% auto;
}
#bigbox {
    width:500px;
    height:500px;
    border:1px dashed blue;
    display:inline-block;
}
#box {
    width:250px;
    height:250px;
    border:1px dashed blue;
    display:inline-block;
    vertical-align:top;
}
#box_wrapper {
    width:250px;
    height:500px;
    border:1px dashed red;
    display:inline-block;
    vertical-align:top;
}

简单的CSS \ HTML DIV布局问题

2 个答案: