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元素，并且它应该按预期工作。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

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？

3 个答案: