Question

我已经阅读了有关堆栈溢出的其他帖子，但到目前为止它们都没有。我遇到的问题是2个div不会并排坐着。

我有一个主内容div，我有一个小的appbar div我试图直接放在内容的右边。

我尝试的所有内容都会导致appbar div在我的页脚下，或导致内容在容器下面。

#appbar {
width:300px;
background-color:orange;
position:relative;
}

#content {
color:black;
width:500px;
}

footer {
height:10%;
opacity:0.8;
text-align:center;
}

Answer 1

尝试像这样浮动你的元素：

#appbar{
float:right
}

#content {
float:left
}

#footer {
position:absolute;
clear:both;

Answer 2

我将appbar和内容放在容器/包装器div中设置为800px宽度。然后将内容和appbar浮动到左边Float：left;然后在页脚上使用clear：both。请记住，元素将并排放置，如果您希望它们之间有一点间距，请使用填充或边距。

Answer 3

在内容和appbar中使用 display：inline-flex; 。

    #appbar {
width:300px;
background-color:orange;
position:relative;
display: inline-flex;
}

#content {
color:black;
width:500px;
display: inline-flex;
}

footer {
height:10%;
opacity:0.8;
text-align:center;
}

将div放在一起......我读过的任何内容都没有用

3 个答案: