Offset child divs

.titlebar {
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
width: 100%;
display: inline-block;
margin: 0;
height: 125px;
background-color: rgb(0, 0, 0);
vertical-align: top;
}
.slogan {
text-align: right;
color: white;
font-size: 20px;
vertical-align: top;
padding: 10px;
}
.assets {
text-align: left;
color: white;
font-size: 20px;
vertical-align: top;
padding: 10px;
}

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="default.css"> 
</head>
<div class="titlebar">
<div class="assets">
123
</div>
<div class="slogan">
Hello
</div>
</div>
</html>

在父div中添加多个子div时，位置开始偏移。我怎样才能把它们调平?我已经尝试在子元素和父元素中垂直对齐，但它们仍然是偏移的。

这是因为两个div是一个接一个出现的;它们占用了正常文档流中的空间。如果您希望它们处于相同的位置，您可以

设置父div为display: flex;和justify-content: space-between;(建议解决方案)):

.titlebar {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
width: 100%;
display: inline-block;
margin: 0;
height: 125px;
background-color: rgb(0, 0, 0);
vertical-align: top;

/* 👇 */
display: flex;
justify-content: space-between;
}
.slogan {
text-align: right;
color: white;
font-size: 20px;
vertical-align: top;
padding: 10px;
}
.assets {
text-align: left;
color: white;
font-size: 20px;
vertical-align: top;
padding: 10px;
}

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="default.css">
</head>
<div class="titlebar">
<div class="assets">
123
</div>
<div class="slogan">
Hello
</div>
</div>
</html>

为两个子节点添加绝对定位(不推荐)因为绝对定位会从正常文档流中移除元素):

.titlebar {
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
width: 100%;
display: inline-block;
margin: 0;
height: 125px;
background-color: rgb(0, 0, 0);
vertical-align: top;
}
.slogan {
text-align: right;
color: white;
font-size: 20px;
vertical-align: top;
padding: 10px;

/* 👇 */
position: absolute;
right: 0;
}
.assets {
text-align: left;
color: white;
font-size: 20px;
vertical-align: top;
padding: 10px;

/* 👇 */
position: absolute;
left: 0;
}

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="default.css"> 
</head>
<div class="titlebar">
<div class="assets">
123
</div>
<div class="slogan">
Hello
</div>
</div>
</html>

重复的答案确实回答了这个问题，但要回答您的具体问题:

我把你的.titlebar改为flex父级(没有理由在你的代码是inline)，并设置justify-content: space-between属性。

.titlebar {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
width: 100%;
/* changed this */
display: flex;
margin: 0;
height: 125px;
background-color: rgb(0, 0, 0);
vertical-align: top;
/* added this */
justify-content: space-between;
}
.slogan {
text-align: right;
color: white;
font-size: 20px;
vertical-align: top;
padding: 10px;
}
.assets {
text-align: left;
color: white;
font-size: 20px;
vertical-align: top;
padding: 10px;
}

<div class="titlebar">
<div class="assets">
123
</div>
<div class="slogan">
Hello
</div>
</div>

相关内容

最新更新

热门标签：