CSS 固定宽度和流动内容的侧边栏

Question

我正在尝试添加固定宽度的边栏。但是内容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>

希望有人能帮忙。

Answer 1

只需将 .page-side 移到 html

中的 .page-content 之前

.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>

Answer 2

不确定您是否希望侧边栏宽度精确到 200 像素，您也可以按百分比分配宽度...希望这对您有所帮助

<div class="page-main">

            <div class="page-content">
                Content

            </div>

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

.page-main{
padding: 10px;
height: auto;
overflow: hidden;
}
.page-content{
background-color: red;
width: auto;
overflow: hidden;
float:left;
width: 61%;
}

.page-side {
float: right;
width: 200px;
background-color: green;
}

或者检查一下：https://jsfiddle.net/pjx6wqrw/3/

{编辑以从代码块中删除 jsfiddle link}

Answer 3

1.you可以用css表达式

.page-content {width: calc(100% - 200px);float:left}

2.or 可以将侧边栏设置为绝对，并为page-content添加margin-right

.page-side {
    width: 200px;
    background-color: green;
    position: absolute;
    right: 20px;
    top: 18px;
}
.page-content {
    background-color: red;
    width: auto;
    overflow: hidden;
    margin-right: 200px;
}

Answer 4

您可以使用负边距。

HTML:

<div class="wrapper">

    <div class="content">
    </div><!-- .content -->

    <div class="sidebar">
    </div><!-- .sidebar -->

</div><!-- .wrapper -->

CSS:

.wrapper{
    margin-right: 300px;
}
.content{
    width: 100%;
    float: left;
}
.sidebar{
    float: right;
    width: 300px;
    margin-right: 300px;
}

2-3 列布局的完整说明和示例：

https://shellcreeper.com/responsive-fixed-width-sidebar-why-and-how/

CSS 固定宽度和流动内容的侧边栏

CSS sidebar with fixed width and fluid content

html

css

width

fixed

fluid