如何將圖像添加到僅包含在一列中的列中？

要求是必須有3列，它們之間有2em的間距，每個200px，它們之間使用列規則的行和僅包含在其中一列中的圖像。如何將圖像添加到僅包含在一列中的列中？

<body> 

<div class="columnz"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed porttitor erat. Maecenas in lacus risus. In in vehicula lacus. Integer tellus massa, sollicitudin eu tempor sed, sodales in urna. Curabitur ultricies id neque at tempus. Duis vehicula libero iaculis, iaculis est vitae, volutpat odio. Maecenas blandit tellus sed malesuada auctor. Pellentesque sit amet quam accumsan, sagittis est a, bibendum risus. Sed viverra ante vitae enim vulputate venenatis. </p> 
<img src="http://tinyurl.com/nonzzfy" alt="interstellar"> 
    <p>In congue sapien mattis erat placerat accumsan. Nullam at consectetur nibh. Nullam hendrerit nisi tortor, quis pretium nulla porttitor vitae. Maecenas accumsan finibus ligula sed auctor. Nulla eu diam eu ex consectetur facilisis. Vestibulum nec sem tellus. Phasellus eu ex tellus. Morbi facilisis interdum aliquam. Nunc pellentesque, leo sed facilisis varius, mi nibh venenatis nibh, in scelerisque nibh dui eget ipsum. Ut hendrerit laoreet augue id laoreet. Fusce rhoncus ex eget sem placerat faucibus imperdiet id metus. Suspendisse vitae sapien quis ante fermentum posuere sit amet quis felis. In vulputate at mi in eleifend. Donec auctor leo vitae tincidunt cursus. </p> 

    <p>Nam vestibulum ut nunc et vulputate. Suspendisse blandit nulla accumsan magna elementum, sed efficitur tellus vulputate. Nam cursus lacus turpis. Mauris elementum faucibus facilisis. Curabitur non diam ut nibh congue venenatis eget ornare eros. Aliquam egestas justo vel cursus volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ornare lacinia enim, at ornare elit tempor sed. Nulla venenatis molestie maximus. Sed in egestas nulla. Donec vulputate magna eu accumsan fringilla. Mauris id scelerisque ante, at dapibus risus. Morbi ligula sem, mollis vel condimentum luctus, sagittis id magna. Praesent vehicula tortor ante, nec vulputate purus venenatis consequat. Suspendisse convallis sem efficitur, malesuada leo et, mollis ipsum. </p> 
</div> 

</body> 
</html> 
</body> 
</html> 

    body { 
text-indent: 1em; 
margin: 0px; 
text-align: justify;} 

.columnz { 
-moz-column-count: 3; 
-moz-column-gap: 32px; 
-moz-column-rule: 1px solid #000; 
-moz-column-width: 200px; 
-webkit-columns: 3; 
-webkit-column-gap: 32px; 
-webkit-column-rule: 1px solid #000; 
-webkit-column-width:100px; 
column-count: 3; 
column-gap: 32px; 
column-rule: 1px solid #000; 
column-width:200px;} 

.columnz img { 
    -webkit-column-span: 1; 
    column-span: 1;}

1.是否有必要WebKit的/ MOZ屬性添加到每個CSS規則？ 2.你如何將img包含到1列？它似乎沒有按照我寫的方式做任何事情。

來源

2014-10-06 Darren

只需以下樣式添加到您的圖像的CSS：

.columnz img { 
    width: 100%; 
}

DEMO

來源

2014-10-06 21:41:03

工作很好。謝謝！雖然圖像被推到了列規則的最後一行。我如何讓它具有與段落相同的樣式？ – Darren 2014-10-06 21:47:01

如果我正確理解你，你希望圖像與頂部有一定的間距？如果是，您可以將以下樣式添加到'.columnz img'的CSS：'margin-top：20px;'。 http://jsfiddle.net/nxvtew0a/2/ – 2014-10-06 21:51:53

通過「包含IMG只是1列」你的意思是你想讓它適合在圖像單列我假設？

如果是這樣你需要寬度：100％;

.columnz img { 
    -webkit-column-span: 1; 
    width: 100%; 
    column-span: 1;} 
}

來源

2014-10-06 21:43:37

如何將圖像添加到僅包含在一列中的列中？

回答

相關問題