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，然后将图像向左浮动。

Answer 2

您需要在.filter-image和.applied-filter DIV上定义宽度。有关示例，请参阅此JSFiddle：

<div class="filter-dialog">
    <div class="filter-container">
        <div class="filter-image">
            <img src="http://aerodesign.okstate.edu/projects/kittyhawk%20page/A_dragon.png" />
        </div>
        <div class="applied-filters">applied</div>
    </div>
    <div class="filter-options">options</div>
</div>

Answer 3

100％宽度表示最近相对/绝对位置 PARENT 的100％宽度，所以这不是没有办法的。

解决方案：

A）“应用过滤器”的宽度和图像宽度始终相同=＆gt;添加适当的宽度，使它可以彼此相邻。可以这样做：

img{ max-width: 75% } /*or proper px*/
.filterClass{ width: 24%; } /*or proper px*/

B）图片尺寸不固定=＆gt;使用像jQuery这样的javascript框架来计算当前图像大小并更改.filterClass的宽度，如$('.filterClass').css('width', countedWidth);