gpt4 book ai didi

html - 具有 2 列的全宽 CSS,固定菜单宽度和动态内容宽度

转载 作者:太空宇宙 更新时间:2023-11-03 20:39:47 24 4
gpt4 key购买 nike

我无法解决这个问题。我没有使用 bootstrap,因为我开始时没有使用 bootstrap(并且不确定 bootstrap 是否可以做到这一点)。我有一个固定菜单宽度的全宽布局。然后我的内容区域应该是动态的,因为我希望它能够响应。

http://send2list.com/help/troubleshoot.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="da-DK">
<head>
<title></title>
</head>
<body style="background-color:#e0e0e0;color:#fff;margin:0px;">

<div style="width:100%;">
<div style="background-color:#000;">
<div style="float:left;background-color:#222223;width:900px;">Content Area<br> Content width should be responsive. Right now it is set to width 900px. But if user were to resize screen, it should be smaller. Any way to do this with just CSS?</div>
<div style="float:right;background-color:#499939;">Right Menu<br>Right menu is fixed with 240px</div>

</div>
</div>
</body>
</html>

最佳答案

是的,这可以通过将 div 设置为 display: table-cell (display: table-cell 完全支持)而不是 float: left。第一个 div 是百分比,第二个是固定宽度。容器需要设置为 display: tabletable-layout: fixed 以强制固定宽度:

HTML

<div class="container">
<div class="one">Content Area<br/> Content width should be responsive. Right now it is set to width 900px. But if user were to resize screen, it should be smaller. Any way to do this with just CSS?</div>
<div class="two">Right Menu<br/>Right menu is fixed with 240px</div>
</div>

CSS

.container{
width: 100%;
display: table;
table-layout: fixed;
}

.one{
display: table-cell;
vertical-align: top;
/*width: 85%;*/ //REMOVE as VitorinoFernandes pointed out, this is not necesssary seeing how setting the div to display: table-cell within a container set to "display: table" will take the remaining width
background: #222223;
}

.two{
display: table-cell;
vertical-align: top;
width: 240px;
background: #499939;
}

FIDDLE

关于html - 具有 2 列的全宽 CSS,固定菜单宽度和动态内容宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27683141/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com