CSS Responsive comlumns - aligning text

我似乎無法對齊來自彼此相鄰的2列的文本。第一欄只有文字，第二欄有一個圖像，然後是下方的文字，由於某種原因，文字會落在稍微不同的線條高度下，而不與左邊的文字保持平衡。CSS Responsive comlumns - aligning text

最好實際上看到它，但相關的代碼如下解釋... http://goo.gl/Jmq1uI

當我調整瀏覽器使其變小，文本被對齊。我怎樣才能讓它始終保持一致？

.one_half { 
float:left; 
line-height:22px; 
margin-right:2%; 
width:49%; 
margin-bottom:27px; 
display:block 
} 

.one_half_last { 
float:left; 
line-height:22px; 
width:49%; 
margin-bottom:27px; 
display:block 
}

來源

2015-05-14 user1724434

你需要的大小事情垂直的事情在你的排版規模上（想象間隔均勻文本的每一行的基線對齊的水平線）。在你的情況下，你的段落行高度是22px。因此，我們將以此作爲我們的規模和大小都垂直依據是：

使段落等於你行高度低於保證金：

p { 
    line-height: 22px; 
    margin-bottom: 22px; <---- was 20px 
}

確保圖像的高度（或它的容器）等於你行高的倍數（即：22px）。

img.aligncenter.size-full.wp-image-2803 { 
height: 396px; <------- 18*22, closest to natural rendered height 
}

警告：這隻能如果您的列始終固定寬度，你可以讓你的形象在每一個媒體查詢斷點一個精確的高度。如果你的列是基於百分比的，並且可以在任何窗口寬度上變化，不幸的是你會很難讓你的文本在任何地方完美對齊。

一個常見的印刷技巧是讓你的右列變窄，並且呈現段落格式不同（即：可能更緊密的行間距，更小的字體大小，更重的重量等）。這樣做有兩個方面：它完全消除了對齊問題，它可以給出兩列的層次感（即：左列是主要的，右邊是次要的），這可能會或可能不適合您的需求。

來源

2015-05-14 19:16:37

我試過這個，但是它並沒有很好的工作，因爲根據瀏覽器尺寸的不同，文本仍然沒有對齊。我覺得必須有一個準確的解決方案，否則很多響應式網站會出現錯位列。 – user1724434

嗯，這是特別是你的形象造成的錯位，因爲它可以垂直縮放到任何大小保持它的比例。如果您將圖像放在兩列上方以至於跨越整個寬度，則您的列段落都將以相同的垂直位置開始。只要段落的垂直邊距等於段落線高度的倍數，文本應始終對齊。 –

好吧我想通了你的對齊問題是怎麼回事......即使你已經使用該屬性將圖像的高度設置爲396，這會被靈活圖像規則（'height：auto; max-width： 100％'）。所以渲染的高度實際上更小。如果您使用內聯CSS將高度顯式設置爲396px，則在將段落的底部填充設置爲22px後，文本將排齊。 –

CSS Responsive comlumns - aligning text

回答

相關問題