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;

DEMO 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之间的边距空间。

CSS并排第一个上半部分

2 个答案: