Question

我这里有一个jsfiddle - http://jsfiddle.net/w2tbefap/

这是一个简单的CSS问题。

我有两个独立的元素（div在这里）。

这两个元素的宽度不同。

我需要响应地将元素放在彼此旁边，使其位置与底部示例相同。底部的例子只是一个居中的图像。

        .block-1{
            border: 1px solid red;
            height: 100px;
        }

        .content{
            border: 1px solid green;
            position: relative;
        }

        .block-1-1{
            background: blue;
            width: 100px;
            height: 50px;
            //float: left;
            position: absolute;
            right: 50%;
            margin-right: 20px;
        }

        .block-1-2{
            background: yellow;
            width: 300px;
            height: 50px;
            //float: right;
            position: absolute;
            left: 50%;
            //right: 0;
        }



        .block-2{
            border: 1px solid red;
            height: 100px;
        }

        .content-2{

            text-align: center;
        }

Answer 1

尝试使用此CSS作为块，并将text-align:center;添加到.content：

.block-1-1 {
    background: blue;
    width: 100px;
    height: 50px;
    margin-right: 20px;
    display:inline-block;
}
.block-1-2 {
    background: yellow;
    width: 300px;
    height: 50px;
    display:inline-block;
}

<强> jsFiddle example

Answer 2

你必须使用position：absolute; ？

我建议使用inline-block： http://jsfiddle.net/w2tbefap/4/

.content{
    border: 1px solid green;
    position: relative;
    text-align: center;
}

.block-1-1, .block-1-2 {
    display: inline-block;
    width: 100px;
    height: 50px;
}

相应地将两个元素集中在同一级别上

2 个答案: