html - 让右列紧挨着左列，而不是右对齐

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 属性(现在它们有 width:40%;)。