前言
本文是在阅读了这篇文章后,对其内容添加了一些自己的注释和理解产生的,主要方便自己查看
要实现的效果:
解决
布局:
<ul class="Article">
<li class="js-article-item">
<p>
《山楂树之恋》是由张艺谋执导,周冬雨、窦骁等主演的爱情片,该片于2010年9月16日在中国内地上映。
该片根据艾米的同名小说改编,讲述了静秋、老三之间相识、相恋,最后天人永隔的故事。
该片入围柏林国际电影节水晶熊和香港金像奖最佳亚洲电影,并获得华表奖优秀故事片奖。
2018年8月18日,被评为改革开放40周年中国十大优秀爱情电影。
</p>
</li>
<li class="js-article-item">
<p>
《山楂树之恋》是由张艺谋执导,周冬雨、窦骁等主演的爱情片,该片于2010年9月16日在中国内地上映。
该片根据艾米的同名小说改编,讲述了静秋、老三之间相识、相恋,最后天人永隔的故事。
</p>
</li>
<li class="js-article-item">
<p>
《山楂树之恋》是由张艺谋执导,周冬雨、窦骁等主演的爱情片,该片于2010年9月16日在中国内地上映。
</p>
</li>
</ul>
方法1:内外边距
需要确定元素宽度,如果需要元素跟随窗口大小自适应变化,需要结合js实现
利用padding-bottom|margin-bottom
正负值相抵,不会影响页面布局的特点。设置父容器设置超出隐藏overflow: hidden
,这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度,当它里面的任一列高度增加了,则父容器的高度被撑到里面最高那列的高度,其他比这列矮的列会用它们的padding-bottom
补偿这部分高度差。
<style>
* {