CSS並排div位於第一個的中間

Question

查看圖片： https : //dl.dropboxusercontent.com/u/63494571/whatswrong_div.jpg

如您在上圖中所看到的，由於某種原因，我的圖像僅位於第一個div的上方，因此它應該以相同的高度緊鄰它。

這是指向最終外觀的圖像的鏈接： https : //dl.dropboxusercontent.com/u/63494571/add_sale_new.jpg

的CSS

.add_sale_background {
    background-color:#353535;
    border:solid #000 1px;
    border-radius: 10px;    
}
.add_sale_container { width:210px; margin:1em; font-size:14px; display:inline-block; }

.add_sale_image_container { width:150px; text-align:left; padding:4px; display:inline-block; }
.add_sale_image { height:135px; width:135px; background-size:cover; margin: 7.5px; }
.add_sale_selected_product > span {
    margin:2px;
    border-radius:5px;
    padding:2px;
    cursor:pointer;
    background-color:#353535;
    border:solid #000 1px;
    border-radius: 5px;
    display:inline-block;
}
.add_sale_selected_product > span:hover { background-color:#005c9c; }

.add_sale_controls_container {
    width:35px;
    height:200px;
    display:inline-block;
}

html

    <div class="sidebar">
        Sidebar
    </div>
    <div class="add_sale_container">
        <form name="sale">
            <div class="add_sale_image_container add_sale_background">
                <div>image1</div>
                <div class="add_sale_image" style="background-image:url(images/image4.JPG);"></div>
                <div class="add_sale_selected_product">
                    <span>KR</span>
                </div>
                <input type="hidden" id="applied_product" value="KR" />
            </div>
            <div class="add_sale_controls_container add_sale_background">
                dsa
            </div>
        </form>
    </div>

Answer 1

向右float: right;控制部分，向右float: right;

演示http://jsfiddle.net/kevinPHPkevin/fAAXU/

Answer 2

要到達您想去的地方，您需要將以下內容添加到以下css中：

.add_sale_image_container { 
    float: left; 
    margin-right: 10px;
}

我做了一個jsfiddle，向您展示了它的外觀： http : //jsfiddle.net/mattokdla/L9Wre/

您可以將整個容器保留為inlin-block而不向左浮動，但是內部的div需要向左浮動，如jsfiddle文件上所示才能使其正常工作。 這樣，您還可以控制2個div之間的邊距空間。