的方法有什么区别?
谁能告诉我下面两种放置方式的区别是什么?
我能看到视觉上的差异,但不明白为什么。
<div class="column">
<img src="//placekitten.com/100/100" alt="Forest" style="width:100%">
<img src="//placekitten.com/100/101" alt="Mountains" style="width:100%">
</div>
<div class="column">
<img src="//placekitten.com/100/100" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="//placekitten.com/100/101" alt="Mountains" style="width:100%">
</div>
这取决于column
类的定义。通常div
元素是块元素,但这种行为可以被CSSdisplay
属性覆盖。列在一行中,因此在这种情况下,具有column
CSS类的div
元素将被重新定义为内联元素或内联块元素。
第一个标记是一列,列中有两个全宽图像,由于宽度为100%,因此将垂直对齐。
第二个标记是作为列的两个元素,每个元素中有一个图像。它们可以是垂直的,也可以是水平的,这取决于column
类是如何定义的。
当使用列时,你通常会用某种"row"类。
你可能想看看像Bootstrap这样的CSS框架,它会让你更容易。