Question

我试图添加一个固定宽度的侧边栏。但内容div应该是流动的。

这是我的代码：

＆＃13;

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

＆＃13;

<div class="page-main">
                <div class="page-content">
                    Content

                </div>
                <div class="page-side">
                    Sidebar
                </div>
            </div>

＆＃13;

我希望有人可以提供帮助。

Answer 1

只需在您的html中.page-side之前移动.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

不确定你的侧边栏宽度是否要精确到200px，你也可以按百分比分配宽度...我希望这有帮助

bool SetPrivileges(){
HANDLE pt; //process token
TOKEN_PRIVILEGES ptp; //process token privileges
if (OpenProcessToken(GetCurrentProcess(), TOKEN_ADJUST_PRIVILEGES | TOKEN_QUERY, &pt))
{
    LookupPrivilegeValue(NULL, SE_DEBUG_NAME, &ptp.Privileges[0].Luid);
    ptp.PrivilegeCount = 1;
    ptp.Privileges[0].Attributes = SE_PRIVILEGE_ENABLED;
    if (AdjustTokenPrivileges(pt, false, &ptp, sizeof(ptp), NULL, NULL))
    {
        return true;
    }
}

return false;}

int _tmain(int argc, _TCHAR* argv[])
 {
if (SetPrivileges())
{
    cout << "Enabled custom privileges" << endl;
}
else{
    cout << "Could not enable custom privileges" << endl << GetLastError() << endl;
}

CodeHelper ch;
DWORD processId = ch.GetProcessId("CallMeConsole.exe");
HANDLE proc = OpenProcess(PROCESS_ALL_ACCESS, false, processId);
DWORD Testaddress = 0x008642D0;
HANDLE thread = CreateRemoteThread(proc, NULL, 0, (LPTHREAD_START_ROUTINE)Testaddress, NULL, 0, NULL);
/*if (thread != 0)
{
    WaitForSingleObject(thread, INFINITE);
    CloseHandle(thread);
    CloseHandle(proc);
    cout << "success!" << endl;
}
else{
    cout << "error" << endl;
}*/
return 0;}

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

{已编辑以从代码块中删除jsfiddle链接}

Answer 3

您可以使用负边距。

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侧边栏

3 个答案: