具有固定宽度和流体含量的CSS边栏

R3Tech

我正在尝试添加固定宽度的边栏。但是内容div应该流畅。

这是我的代码:

.page-main{
    padding: 10px;
    height: auto;
    overflow: hidden;
}

.page-content{
    background-color: red;
    width: auto;
    overflow: hidden;
}

.page-side {
    float: right;
    width: 200px;
    background-color: green;
}
<div class="page-main">
                <div class="page-content">
                    Content

                </div>
                <div class="page-side">
                    Sidebar
                </div>
            </div>

我希望有人能帮帮忙。

斯凯伦杰斯

就在移动.page-side之前.page-content在你的HTML

.page-main{
    padding: 10px;
    height: auto;
    overflow: hidden;
}

.page-content{
    background-color: red;
    width: auto;
    overflow: hidden;
}

.page-side {
    float: right;
    width: 200px;
    background-color: green;
}
<div class="page-main">
  <div class="page-side">
    Sidebar
  </div>
  <div class="page-content">
    Content
  </div>                
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

具有固定宽度和流体含量的CSS边栏

来自分类Dev

具有流体含量的固定宽度的绝对侧边栏

来自分类Dev

固定柱,流体含量和底部固定脚注

来自分类Dev

如何制作具有固定宽度的色谱柱的流体网格?

来自分类Dev

具有固定宽度的中柱的流体三柱布局

来自分类Dev

CSS左柱流体和右柱固定宽度

来自分类Dev

静态/固定侧栏和液体含量

来自分类Dev

CSS固定的边栏和带有内容的标题栏

来自分类Dev

左div具有固定宽度,右div具有流体宽度

来自分类Dev

固定宽度的侧边栏和流体宽度主要内容区域可疑

来自分类Dev

CSS-中心对齐的3列布局,具有固定宽度的L&R列,流体中心

来自分类Dev

使用纯 CSS 具有“固定”位置的可变宽度侧边栏

来自分类Dev

灵活的布局流体和固定宽度

来自分类Dev

CSS垂直列表,单元格之间具有自动宽度和边距

来自分类Dev

CSS网格,具有全角页眉/页脚和较窄的主/边栏

来自分类Dev

具有100%宽度和边距的浮动列表

来自分类Dev

具有100%宽度和边距的浮动列表

来自分类Dev

CSS和DIV,标题和正文具有可滚动的内容,右侧固定了侧边栏

来自分类Dev

引导边栏和内容宽度

来自分类Dev

具有百分比宽度但边距固定的Flexbox

来自分类Dev

CSS:图像具有“固定”的高度,最大宽度并保持宽高比?

来自分类Dev

某些列具有固定宽度的CSS网格

来自分类Dev

CSS:图像具有“固定”的高度,最大宽度并保持宽高比?

来自分类Dev

CSS和jQuery具有不同的宽度

来自分类Dev

CSS和jQuery具有不同的宽度

来自分类Dev

CSS-具有背景图像的等高流体宽度div

来自分类Dev

具有100%宽度和固定高度的背景视频

来自分类Dev

读取具有固定宽度和缺失值的表格数据

来自分类Dev

水平和垂直绝对中心的div具有流体的宽度和高度?

Related 相关文章

  1. 1

    具有固定宽度和流体含量的CSS边栏

  2. 2

    具有流体含量的固定宽度的绝对侧边栏

  3. 3

    固定柱,流体含量和底部固定脚注

  4. 4

    如何制作具有固定宽度的色谱柱的流体网格?

  5. 5

    具有固定宽度的中柱的流体三柱布局

  6. 6

    CSS左柱流体和右柱固定宽度

  7. 7

    静态/固定侧栏和液体含量

  8. 8

    CSS固定的边栏和带有内容的标题栏

  9. 9

    左div具有固定宽度,右div具有流体宽度

  10. 10

    固定宽度的侧边栏和流体宽度主要内容区域可疑

  11. 11

    CSS-中心对齐的3列布局,具有固定宽度的L&R列,流体中心

  12. 12

    使用纯 CSS 具有“固定”位置的可变宽度侧边栏

  13. 13

    灵活的布局流体和固定宽度

  14. 14

    CSS垂直列表,单元格之间具有自动宽度和边距

  15. 15

    CSS网格,具有全角页眉/页脚和较窄的主/边栏

  16. 16

    具有100%宽度和边距的浮动列表

  17. 17

    具有100%宽度和边距的浮动列表

  18. 18

    CSS和DIV,标题和正文具有可滚动的内容,右侧固定了侧边栏

  19. 19

    引导边栏和内容宽度

  20. 20

    具有百分比宽度但边距固定的Flexbox

  21. 21

    CSS:图像具有“固定”的高度,最大宽度并保持宽高比?

  22. 22

    某些列具有固定宽度的CSS网格

  23. 23

    CSS:图像具有“固定”的高度,最大宽度并保持宽高比?

  24. 24

    CSS和jQuery具有不同的宽度

  25. 25

    CSS和jQuery具有不同的宽度

  26. 26

    CSS-具有背景图像的等高流体宽度div

  27. 27

    具有100%宽度和固定高度的背景视频

  28. 28

    读取具有固定宽度和缺失值的表格数据

  29. 29

    水平和垂直绝对中心的div具有流体的宽度和高度?

热门标签

归档