Html 如何用行制作一行div？_Html_Css_Layout

Html 如何用行制作一行div？

html css layout

Html 如何用行制作一行div？,html,css,layout,Html,Css,Layout,我试图制作一行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，其中每个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>

因此，我需要以下输出：

ABC    GHI    MNO    STU
DEF    JKL    PQR    VWX

ABC 
DEF

GHI
JKL

MNO 
PQR

STU
VWX

但我得到了愚蠢的输出：

ABC    GHI    MNO    STU
DEF    JKL    PQR    VWX

ABC 
DEF

GHI
JKL

MNO 
PQR

STU
VWX

如上图所示，如何将代码固定为一行，使其保持内联状态？

如下所示： CSS:

.inline{
        display: inline;
    }

    .block{
        display: inline-block;
    }

像这样： CSS:

.inline{
        display: inline;
    }

    .block{
        display: inline-block;
    }

您正在将

.block

设置为块元素，因此生成一个全宽元素，从两侧清除所有内容

您需要将其设置为

内联

或

内联块

元素，它应该按预期工作

.inline{
显示：内联；
}
.街区{
显示：内联块；
}


一排div

基础知识

DEF


GHI

JKL


MNO

PQR


斯图

VWX

您正在将

.block

设置为块元素，因此生成一个全宽元素，用于清除两侧的所有内容

您需要将其设置为

内联

或

内联块

元素，它应该按预期工作

.inline{
显示：内联；
}
.街区{
显示：内联块；
}


一排div

基础知识

DEF


GHI

JKL


MNO

PQR


斯图

VWX

有以下多种方法

使用（推荐）

或

有以下许多方法

使用（推荐）

或

你能修正你的输出值以匹配吗？它返回的字母不一样…@Steve fixed！谢谢@Evorl p.s.无需将父级设置为

显示：内联

，正如您所看到的，我在下面的所有演示中都删除了该选项。您可以将输出值设置为匹配吗？它返回的字母不一样…@Steve fixed！谢谢@Evorlor p.s.没有必要将父级设置为

显示：内联

，因为您可以看到，我在下面的所有演示中都删除了该选项。非常感谢：）如果您好奇，我将绿色复选标记为另一个答案，因为它更易于编辑和实验。如果可以的话，我会用绿色复选标记u tooth，我们最好用嵌入式代码编辑器给出这样的例子，因为我们不知道JSFIDLE是否有一天会失败……非常感谢：）如果你好奇的话，我会用绿色复选标记另一个答案，因为它更容易编辑和实验。如果可以的话，我想绿色的复选标记u tooth，我们最好使用嵌入式代码编辑器给出这样的示例，因为我们不知道JSFIDLE是否有一天会崩溃。。

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

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