DIV中未对齐的对象

Question

我有一个矩形的灰色div，它应该有一个标题（＆＃34;示例文本＆＃34;）和一个薄的绿松石高光（也只是一个薄的矩形）。当我在另一个div里面有绿松石div和标题时，一个人被迫离开。

首先，我该如何解决这个问题？另外，是否有更有效的方法让我在灰色div中制作绿松石亮点？

http://imgur.com/Sm8qy8J,kSuNEh5（如果我有HTML，如图所示）

http://imgur.com/Sm8qy8J,kSuNEh5#1（如果我删除绿松石div）

h3 {
font: $header-type-font;
font-family: $header-type-font;
color: $header-type-color;
text-align: center;
}

#headerbox {
background-color: $box-color;
height: $block-height;
width: 400px;
}

.highlightbox {
background-color: $highlight-color;
height: $block-height;
width: 20px;
}

注意我在这里使用了一些Sass CSS：

{{1}}

Answer 1

将float:left添加到 highlightbox 类：

.highlightbox {
    background-color: $highlight-color;
    height: $block-height;
    width: 20px;
    float:left;
}