如何用行制作一行 div？

Question

我正在尝试制作一行 div，其中每个 div 有两行。我有以下代码：

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Row of Divs</title>
    <link href="style.css" rel="stylesheet"/>
</head>
<body>
<div class="inline">
    <div class="block">
        <p>
            ABC
            <br>
            DEF
        </p>
    </div>
    <div class="block">
        <p>
            GHI
            <br>
            JKL
        </p>
    </div>
    <div class="block">
        <p>
            MNO
            <br>
            PQR
        </p>
    </div>
    <div class="block">
        <p>
            STU
            <br>
            VWX
        </p>
    </div>
</div>
</body>
</html>

style.css

div.inline{
    display: inline;
}

div.block{
    display: block;
}

所以我想要以下输出：

ABC    GHI    MNO    STU
DEF    JKL    PQR    VWX

但我得到以下输出：

ABC 
DEF

GHI
JKL

MNO 
PQR

STU
VWX

如何修复我的代码以保持内联为一行，如上所示？

Answer 1

像这样： https://jsfiddle.net/ar97yzqv/1/ CSS:

.inline{
        display: inline;
    }

    .block{
        display: inline-block;
    }

Answer 2

您正在将 .block 设置为块元素，因此创建一个全宽元素，从两侧清除所有内容。

您需要将其设置为 inline 或 inline-block 元素，它应该会按预期工作。

.inline {
  display: inline;
}
.block {
  display: inline-block;
}

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Row of Divs</title>
  <link href="style.css" rel="stylesheet" />
</head>

<body>
  <div class="inline">
    <div class="block">
      <p>
        ABC
        <br>DEF
      </p>
    </div>
    <div class="block">
      <p>
        GHI
        <br>JKL
      </p>
    </div>
    <div class="block">
      <p>
        MNO
        <br>PQR
      </p>
    </div>
    <div class="block">
      <p>
        STU
        <br>VWX
      </p>
    </div>
  </div>
</body>

</html>

Answer 3

有以下几种方式

使用inline-block（推荐）

.block { display: inline-block; } /*child*/

或float

.block { float: left; } /*child*/

或flex

.inline { display: flex; } /*parent*/

或table + table-cell

.inline { display: table; } /*parent*/
.block { display: table-cell; } /*child*/

如何用行制作一行 div？

How do I make a row of divs with rows?

html

css

layout