將右欄放在左欄旁邊，而不是右欄對齊

如何在左下欄旁邊排列正確的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

將右欄放在左欄旁邊，而不是右欄對齊

回答

相關問題