html - DIV 中未对齐的对象

标签 html css sass

<分区>


关闭 7 年前

我有一个矩形的灰色 div,它应该包含一个标题(“示例文本”)和一个薄的绿松石突出显示(它也只是一个薄的矩形)。当我在另一个 div 中同时拥有绿松石 div 和 header 时,其中一个被强制退出。

首先,我该如何解决这个问题?另外,有没有更有效的方法让我在灰色 div 中突出绿松石色?

http://imgur.com/Sm8qy8J,kSuNEh5 (如果我有如图所示的 HTML)

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

<div class="column w2">
    <div id="headerbox">
        <div class="highlightbox">
        </div>
    <h3>sample text</h3>
    </div>
</div>

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

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;
}

最佳答案

float:left 添加到您的 highlightbox 类:

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

关于html - DIV 中未对齐的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31484625/

上一篇:javascript - Z-index 坏了

下一篇:jquery - 页脚向上 float

相关文章:

html - Twitter登录按钮如何具有44像素的高度

html - 无法将 4 个 div 在一个 div 中居中

html - 关于如何在 CSS 中实现 GridView 的任何想法? - CSS

css - 分区重叠

node.js - 将 SailsJS 部署到 Openshift

javascript - WordPress Divi 主题 - anchor 链接打开特定选项卡切换

jquery - 在某些 HTML 标记后停止打印

jquery - 如何根据CSS中的上述文本对齐文本?

javascript - 动画 Bootstrap 卡替换消失的卡

javascript - 具有特定视口(viewport)宽度的超出视口(viewport)高度的额外空间