Question

我不明白为什么我不能让这些盒子水平对齐。第二列和第三列从前一列开始。它们是否可以水平排列而无需使用position: relative; bottom: 150px;类型定位或边距移动列？

这里是JSFiddle：https://jsfiddle.net/625nrqj7/

HTML：

<div class="wrapper">
  <div class="left-middle-blocks">
      <div class="submenu-block-1"></div>
      <div class="submenu-block-2"></div>
      <div class="submenu-block-3"></div>
      <div class="submenu-block-4"></div>
      <div class="submenu-block-5"></div>
      <div class="submenu-block-6"></div>
 </div>
<div class="submenu-image-top"></div>
<div class="submenu-image-bottom"></div>
</div>

CSS：

.submenu-image-top,.submenu-image-bottom,.submenu-block-1,.submenu-block-    2,.submenu-block-3,.submenu-block-4,.submenu-block-5,.submenu-block-6 {
  width: 50px;
  height: 50px;
}

    .submenu-block-1,.submenu-block-2,.submenu-block-3 {
  float: left;
  clear: left;
  background: red;
}

    .submenu-block-4,.submenu-block-5,.submenu-block-6 {
  float: right;
  clear: right;
  background: yellow;
}

    .submenu-image-top,.submenu-image-bottom {
  float: right;
  clear: right;
  background: blue;
}

    .wrapper {
  width: 250px;
}

    .left-middle-blocks {
  width: 150px;
}

Answer 1

您的问题非常模糊，但如果我理解正确，您可以通过将每个三个块包装在不同的包装器中并设置来实现您想要的效果：

.wrapper {
    display: inline-block;
}

jsFiddle：→here。

<强>段：

.wrapper {
    display: inline-block;
    margin: 0 25px; /* To separate them */
}
.block  {
    width: 50px;
    height: 50px;
    border: 1px solid green; /* To make each square visible */
}
#block-1, #block-2, #block-3 {
    background: red;
}
#block-4, #block-5, #block-6 {
    background: yellow;
}
#block-7, #block-8, #block-9 {
    background: blue;
}

<div class="wrapper">
    <div id="block-1" class="block"></div>
    <div id="block-2" class="block"></div>
    <div id="block-3" class="block"></div>
</div>
<div class="wrapper">
    <div id="block-4" class="block"></div>
    <div id="block-5" class="block"></div>
    <div id="block-6" class="block"></div>
</div>
<div class="wrapper">
    <div id="block-7" class="block"></div>
    <div id="block-8" class="block"></div>
    <div id="block-9" class="block"></div>
</div>

如果您希望盒子保持在线使用：

.block {
    display: inline-block;
}

<强>段：

.wrapper, .block {
  display: inline-block;
}
.wrapper {
  margin: 0 15px;
  /* To separate them */
}
.block {
  width: 50px;
  height: 50px;
  border: 1px solid green;
  /* To make each square visible */
}
#block-1, #block-2, #block-3 {
  background: red;
}
#block-4, #block-5, #block-6 {
  background: yellow;
}
#block-7, #block-8, #block-9 {
  background: blue;
}

<div class="wrapper">
  <div id="block-1" class="block"></div>
  <div id="block-2" class="block"></div>
  <div id="block-3" class="block"></div>
</div>
<div class="wrapper">
  <div id="block-4" class="block"></div>
  <div id="block-5" class="block"></div>
  <div id="block-6" class="block"></div>
</div>
<div class="wrapper">
  <div id="block-7" class="block"></div>
  <div id="block-8" class="block"></div>
  <div id="block-9" class="block"></div>
</div>

CSS - 如何在3列3中排列9个盒子？

1 个答案: