Question

如何在左侧div旁边直接排列正确的div？目前，正确的div似乎在右边一直对齐。

CSS

.leftColumn {
    border: 1px solid #ccc;
    margin-bottom: .5em;
}
.columnsContainer {
    position: relative;
    margin: 0 auto;
}
.rightColumn {
    border: 1px solid #ccc;
    padding: 1.25em;
}
@media only screen and (min-width: 769px) {
    .leftColumn {
        margin-right: 50%;
    }
    .rightColumn {
        position: absolute;
        top: 0;
        right: 0;
        width: 35%;
    }
}

Jsfiddle：http://jsfiddle.net/yzf76wgL/1/

Answer 1

有很多方法可以做到这一点。您可以尝试使用此代码：http://jsfiddle.net/yzf76wgL/3/

.leftColumn {
    border: 1px solid #ccc;
    margin-bottom: .5em;
    width: 40%;
    display:inline-block;
}
.leftColumn img{
    width:100%;
}
.columnsContainer {
    position: relative;
    margin: 0 auto;
    height:100%;
}
.rightColumn {
    border: 1px solid #ccc;
    padding: 1.25em;
    width: 40%;
    display:inline-block;
    vertical-align: top;
}

如果要更改div的“大小”（宽度），可以更改leftColumn或rightColumn的width属性（现在它们的宽度为：40％;）。

Answer 2

创建一个类.column并在所有项目上使用它，然后分配float: left;如果您希望它具有响应性我建议您使用%在div上max-width:和将CSS媒体查询用于不同的设备视图以及它们如何对齐。

http://jsfiddle.net/yzf76wgL/4/

将右列放在左列旁边，而不是右对齐

2 个答案: