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

如何在左下栏旁边排列正确的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/

来源

2014-10-29 methuselah

对所有项目使用一列，对列使用“float：left;”。 – Xrait 2014-10-29 00:23:14

有很多的方法可以做到这一点。您可以尝试使用此代码：如果你想改变的div的“尺寸”（宽度）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; 
}

，您可以更改leftColumn或rightColumn（宽度属性现在他们有宽度：40％）。

来源

2014-10-29 00:25:45

是否可以将图像缩放到div而不是拉伸？ – methuselah 2014-10-29 06:43:04

图像具有'width：100％'，因此它与他的容器一起缩放。但是，如果你想要一个响应img，你应该添加：'.leftColumn img {width：100％; height：auto;}' – 2014-10-29 14:56:11

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

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

来源

2014-10-29 00:30:11 Xrait

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

回答

相关问题