Question

.box {
    background: maroon;
    width: 200px;
    height: 150px;
}
.box-1 {
    border: 5px solid black;
}
.box-2 {
    display: inline-block;
    border: 5px double black;
}
.box-3 {
    display: inline-block;
    border: 5px dashed black;
}
.box-4 {
    display: inline-block;
    border: 5px dotted black;
}
.box-5 {
    display: inline-block;
    border: none;
}

 <body>
      <div class="box box-1"></div>
      <div class="box box-2"></div>
      <div class="box box-3"></div>
      <div class="box box-4"></div>
      <div class="box box-5"></div>
  </body>

我在对齐第三和第四格时遇到麻烦。按照上面的代码，我得到this。但是，我尚未设置第三和第四div的样式（这是我在这里要问的），并且所需的样式是this。我告诉过不要使用flexbox或grid，而只能使用box模型的基本显示属性，例如inline和inline-block。

Answer 1

您可以对行使用另一个DIV，并使您的框全部“显示：内联块；”

.box-row {
    display: block;
    border: 1px solid #00FF00;
}

.box {
    display: inline-block;
    background: maroon;
    width: 200px;
    height: 150px;
}
.box-1 {
    display: inline-block;
    border: 5px solid black;
}
.box-2 {
    display: inline-block;
    border: 5px double black;
    margin-right: 20px;
}
.box-3 {
    display: inline-block;
    border: 5px dashed black;
    margin-left: 20px;
}
.box-4 {
    display: inline-block;
    border: 5px dotted black;
    margin-right: 20px;
}
.box-5 {
    display: inline-block;
    border: none;
    margin-left: 20px;
}

 <body>
      <div class="box-row">
        <div class="box box-1"></div>
      </div>
      <div class="box-row">
        <div class="box box-2"></div>
        <div class="box box-3"></div>
      </div>
      <div class="box-row">
        <div class="box box-4"></div>
        <div class="box box-5"></div>
      </div>
  </body>

Answer 2

使用浮点数：

.box {
  background: maroon;
  width: 200px;
  height: 150px;
  box-sizing:border-box;
  float: left;
  margin: 10px;
}

.box-1 {
  border: 5px solid black;
}

.box-2 {
  clear: left; /* start a new line here */
  border: 5px double black;
}

.box-3 {
  border: 5px dashed black;
}

.box-4 {
  clear: left; /* and here */
  border: 5px dotted black;
}

<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>

使用内联块，您可以尝试如下操作：

.box {
  background: maroon;
  width: 200px;
  height: 150px;
  box-sizing:border-box;
  display: inline-block;
  margin: 10px;
}

.box-1 {
  display:block;
  border: 5px solid black;
}

.box-2 {
  border: 5px double black;
}

.box-3 {
  border: 5px dashed black;
}


.box-4 {
  display:inline;
}
.box-4::before {
  content:"\A";
  white-space:pre;
}
.box-4::after {
  content:"";
  border: 5px dotted black;
  background: maroon;
  width: 200px;
  height: 150px;
  box-sizing:border-box;
  display: inline-block;
  margin: 10px;
}

<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box-4"></div>
<div class="box box-5"></div>

将div与仅显示内联和内联块对齐

2 个答案: