Question

我想知道在html / css中是否可以将不同类别的对象放在同一行中。例如正方形。一个高度和宽度为300px，第二个150px，第三个高度和宽度为75px。

HTML：

<!DOCTYPE HTML>
<lang="en">
<head>
    <meta charset="utf-8">
    <title="Boxes"/>
    <link rel="stylesheet" href="folder/css/exercise14.css">
</head>
<body>
<header class="logo">This is my header</header>
<div class="inline box1"></div>
<div class="inline box2"></div>
<div class="inline box3"></div>
</body>

CSS：

before, after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.logo {
    display: inline-block;
    vertical-align: top;
    margin: 20px 450px;
    font-size: 250%;
}

.inline {
    display: inline-block;
}

.box1 {
    display: inline-block;
    vertical-align: top;
    height: 300px;
    width: 300px;
    border: 3px solid;
    margin: 20px;
}

.box2 {
    display: inline-block;
    vertical-align: top;
    height: 150px;
    width: 150px;
    margin: 20px;
}

.box3 {
    display: inline-block;
    vertical-align: top;
    height: 75px;
    width: 75px;
}

Answer 1

是的，看看它如何运作here。

请注意，我将以下规则添加到box2和box3，以便您可以看到这些正方形

border: 3px solid;

将不同类的对象放在同一行中

1 个答案: