Div不会留在另一个Div的范围内

Here is what it looks like:

这是它的样子:

I'd like to have the picture and the name be in the same line as the header... Without having to do manual margin-top...

我希望图片和名称与标题位于同一行...无需手动margin-top ...

Just to note... I am using Bootstrap. http://getbootstrap.com/

请注意......我正在使用Bootstrap。 http://getbootstrap.com/

Here is the HTML code...

这是HTML代码......

Here is the CSS code...

这是CSS代码......

.navbar-top {
    height: 64px;
    background-color: #772A75;
    position: fixed;
    width: 100%;
    min-height: 64px;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0px 2px 10px #888888;
}

.navbar-container {
    padding: 0 20px;
}

.navbar-heading {
    margin-top: 10px;
}

2 个解决方案

#1

Just set float: left for the left heading and set float: right for the right image block.

只需将float:left设置为左侧标题,将float:right设置为右侧图像块。

#2

You can move the dropdown-toggle after the h1 tag, make sure to add display : inline-block to both of them. you might have to play with floats and width to get them the way you want...

您可以在h1标记之后移动下拉切换,确保将display:inline-block添加到它们。你可能不得不玩浮子和宽度来得到他们想要的方式......