zoukankan      html  css  js  c++  java
  • Display:table;妙用,使得左右元素高度相同

    我们在设计网页的时候,为了左右能够分明一点,我们经常会在左边元素弄一个border-right,但是出现一个问题,如果左边高度比较小,这根线就短了,下面空了一部分,反正如果在右边的元素弄一个border-left也会出现这种情况。

    其实我们可以用display:table;来解决左右元素高度不相同的问题。把左右元素的父元素的display设置为table,左右元素的display设置为table-cell即可。具体查看下面代码:

    .container { display: table; }/*container为左右元素的父元素*/ 
    .main, .sidebar { float: none; padding: 20px; vertical-align: top; }
    .main {  400px; background-color: LightSlateGrey; display: table-cell; } 
    .sidebar {  200px; display: table-cell; background-color: Tomato; }
    

    这样一来,不管是左边元素高还是右边元素高,分割线能够从顶部延生到最底部。

  • 相关阅读:
    毕业进度10
    毕业进度9
    毕业进度8
    毕业设计7
    毕业设计6
    java算法每日一练2021/1/26
    java算法每日一练2021/1/23
    java算法每日一练2021/1/21
    java算法每日一练2021/1/20
    java算法每日一练2021-01-18
  • 原文地址:https://www.cnblogs.com/caobiin/p/6781887.html
Copyright © 2011-2022 走看看