zoukankan      html  css  js  c++  java
  • [CSS]两栏自适应布局

    方法一:margin-left/right实现
    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Document</title>
    6. <style>
    7. div {
    8. border:1px solid red;
    9. background:#eee;
    10. }
    11. img {
    12. width:200px;
    13. height:200px;
    14. float:left;
    15. }
    16. p {
    17. margin-left:200px;
    18. }
    19. </style>
    20. </head>
    21. <body>
    22. <div>
    23. <img src="1.jpg">
    24. <p>box-shadow有个超屌的特性,就是阴影可以任意累加,因此,理论上我们可以使用box-shadow生成任意的图片,包括张含韵妹子年轻时候的写真,具体可参加“CSS3 box-shadow盒阴影图形生成技术”一文。但是filter中的drop-shadow就只能抱歉了,我就是一锤子买卖。没钱也这么任性!说到现在,体现的尽是drop-shadow的不好,兼容性不够,内阴影不支持,多阴影也不支持;感觉就像是小蚯蚓,失恋了,工作也没了,存在的意义好像就成了白富美的谈资。真的是这样吗?显然非也!所谓存在既有道理。rop-shadow有一个很厉害的特性,也就这一个特性,让其以后有足够的机会大放异彩!那就是,drop-shadow才是真正意义上的投影,而box-shadow只是盒阴影而已。</p>
    25. </div>
    26. </body>
    27. </html>

    方法二:padding-left/right实现
    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Document</title>
    6. <style>
    7. div {
    8. border:1px solid red;
    9. background:#eee;
    10. }
    11. img {
    12. width:200px;
    13. height:200px;
    14. float:left;
    15. }
    16. p {
    17. padding-left:200px;
    18. }
    19. </style>
    20. </head>
    21. <body>
    22. <div>
    23. <img src="1.jpg">
    24. <p>box-shadow有个超屌的特性,就是阴影可以任意累加,因此,理论上我们可以使用box-shadow生成任意的图片,包括张含韵妹子年轻时候的写真,具体可参加“CSS3 box-shadow盒阴影图形生成技术”一文。但是filter中的drop-shadow就只能抱歉了,我就是一锤子买卖。没钱也这么任性!说到现在,体现的尽是drop-shadow的不好,兼容性不够,内阴影不支持,多阴影也不支持;感觉就像是小蚯蚓,失恋了,工作也没了,存在的意义好像就成了白富美的谈资。真的是这样吗?显然非也!所谓存在既有道理。rop-shadow有一个很厉害的特性,也就这一个特性,让其以后有足够的机会大放异彩!那就是,drop-shadow才是真正意义上的投影,而box-shadow只是盒阴影而已。</p>
    25. </div>
    26. </body>
    27. </html>

    方法三:overflow:hidden实现(BFC化)
    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Document</title>
    6. <style>
    7. div {
    8. border:1px solid red;
    9. background:#eee;
    10. }
    11. img {
    12. width:200px;
    13. height:200px;
    14. float:left;
    15. }
    16. p {
    17. border:1px solid green;
    18. overflow:hidden;
    19. }
    20. </style>
    21. </head>
    22. <body>
    23. <div>
    24. <img src="1t.jpg">
    25. <p>box-shadow有个超屌的特性,就是阴影可以任意累加,因此,理论上我们可以使用box-shadow生成任意的图片,包括张含韵妹子年轻时候的写真,具体可参加“CSS3 box-shadow盒阴影图形生成技术”一文。但是filter中的drop-shadow就只能抱歉了,我就是一锤子买卖。没钱也这么任性!说到现在,体现的尽是drop-shadow的不好,兼容性不够,内阴影不支持,多阴影也不支持;感觉就像是小蚯蚓,失恋了,工作也没了,存在的意义好像就成了白富美的谈资。真的是这样吗?显然非也!所谓存在既有道理。rop-shadow有一个很厉害的特性,也就这一个特性,让其以后有足够的机会大放异彩!那就是,drop-shadow才是真正意义上的投影,而box-shadow只是盒阴影而已。</p>
    26. </div>
    27. </body>
    28. </html>

    方法四:float元素加margin(超出float元素高度后还是会出现环绕)
    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Document</title>
    6. <style>
    7. div {
    8. border:1px solid red;
    9. background:#eee;
    10. }
    11. img {
    12. width:200px;
    13. height:200px;
    14. float:left;
    15. margin-right:40px;
    16. }
    17. p {
    18. border:1px solid green;
    19. }
    20. </style>
    21. </head>
    22. <body>
    23. <div>
    24. <img src="1t.jpg">
    25. <p>box-shadow有个超屌的特性,就是阴影可以任意累加,因此,理论上我们可以使用box-shadow生成任意的图片,包括张含韵妹子年轻时候的写真,具体可参加“CSS3 box-shadow盒阴影图形生成技术”一文。但是filter中的drop-shadow就只能抱歉了,我就是一锤子买卖。没钱也这么任性!说到现在,体现的尽是drop-shadow的不好,兼容性不够,内阴影不支持,多阴影也不支持;感觉就像是小蚯蚓,失恋了,工作也没了,存在的意义好像就成了白富美的谈资。真的是这样吗?显然非也!所谓存在既有道理。rop-shadow有一个很厉害的特性,也就这一个特性,让其以后有足够的机会大放异彩!那就是,drop-shadow才是真正意义上的投影,而box-shadow只是盒阴影而已。</p>
    26. </div>
    27. </body>
    28. </html>

    方法五:display:table-cell(兼容IE7及以下)
    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Document</title>
    6. <style>
    7. div {
    8. border:1px solid red;
    9. background:#eee;
    10. }
    11. img {
    12. width:200px;
    13. height:200px;
    14. float:left;
    15. }
    16. p {
    17. border:1px solid green;
    18. display:table-cell;//IE8+ BFC
    19. width:2000px;
    20. *display:inline-block;//IE7- 伪BFC
    21. *width:auto;
    22. }
    23. </style>
    24. </head>
    25. <body>
    26. <div>
    27. <img src="1t.jpg">
    28. <p>box-shadow有个超屌的特性,就是阴影可以任意累加,因此,理论上我们可以使用box-shadow生成任意的图片,包括张含韵妹子年轻时候的写真,具体可参加“CSS3 box-shadow盒阴影图形生成技术”一文。但是filter中的drop-shadow就只能抱歉了,我就是一锤子买卖。没钱也这么任性!说到现在,体现的尽是drop-shadow的不好,兼容性不够,内阴影不支持,多阴影也不支持;感觉就像是小蚯蚓,失恋了,工作也没了,存在的意义好像就成了白富美的谈资。真的是这样吗?显然非也!所谓存在既有道理。rop-shadow有一个很厉害的特性,也就这一个特性,让其以后有足够的机会大放异彩!那就是,drop-shadow才是真正意义上的投影,而box-shadow只是盒阴影而已。</p>
    29. </div>
    30. </body>
    31. </html>

    方法六:负边距实现
    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Document</title>
    6. <style>
    7. #left {
    8. background-color: green;
    9. float: left;
    10. width: 220px;
    11. margin-right: -100%;
    12. }
    13. #content {
    14. float: left;
    15. width: 100%;
    16. }
    17. #contentInner {
    18. margin-left: 220px;
    19. background-color: orange;
    20. }
    21. </style>
    22. </head>
    23. <body>
    24. <div id="left">
    25. <h1>Left Sidebar</h1>
    26. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    27. </div>
    28. <div id="content">
    29. <div id="contentInner">
    30. <h1>Main content</h1>
    31. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    32. </div>
    33. </div>
    34. </body>
    35. </html>

  • 相关阅读:
    Rancher之Pipeline JAVA demo
    rancher使用fluentd-pilot收集日志分享
    SFTP 命令列表以备查询
    WPF中异步更新UI元素
    Android 开发环境在 Windows7 下的部署安装
    Android Studio vs. Eclipse ADT Comparison
    JQuery 滚动条插件perfect-scrollbar
    nginx+php 在windows下的简单配置安装
    MySql 管理操作常用命令
    JS事件调试
  • 原文地址:https://www.cnblogs.com/enginex/p/6830469.html
Copyright © 2011-2022 走看看