gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:58:03 25 4
gpt4 key购买 nike

我想知道在 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;
}

最佳答案

是的,看看它是如何工作的here .

请注意,我在 box2box3 中添加了以下规则,以便您可以看到那些方 block

border: 3px solid;

关于html - 将不同类别的对象放在同一行中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43354879/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com