如何将图像添加到仅包含在一列中的列中？

要求是必须有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

如何将图像添加到仅包含在一列中的列中？

回答

相关问题