html - CSS 不正常，2 列和 1 行跨越两列

Question

我对 CSS 从来没有任何运气。我有一个对话框，当用户单击一个按钮时会显示该对话框。在这个 div 中有一个图像和 2 个其他 div(包含更多元素)。

它应该如下所示。

包含“应用滤镜”的第二列应位于图像右侧，横跨图像末尾和主容器末尾之间的宽度。但相反，它已经消失在图像之下。

See JSFiddle here

这是 HTML:

<div class="filter_dialog">
    <img src="data/images/20140206/0/emma-watson-hot-43.jpg" width="550px" />
    <div class="applied_filters">
        <p>Applied Filters</p>
    </div>
    <div class="filters">dsadsa</div>
</div>

CSS:

.filter_dialog {
    background-color:#333333;
    border:solid 1px #666666;
    display:inline-block;
    margin:0 auto;
    border-radius:15px;
}
.filter_dialog img {
    border-radius:15px 15px 0px 0px;
    float:left;
}
.applied_filters {
    float:left;
    background-color:#1a1a1a;
    width:100%;
}
.filters {
    background-color:#1a1a1a;
    height:8em;
    width:100%;
    border-radius:0px 0px 15px 15px;
    display:inline-block;
}

Answer 1

您需要在两个过滤器 div 上设置固定宽度。我建议将它们包装在一个固定宽度的 div 中，设置为 float: right，然后将图像向左浮动。