我正在尝试为使用固定位置的div添加最小宽度 . 如果我删除固定位置,我不确定下面的代码是否可行 .
我想要实现的是保护红色区域(包含链接)中的文本不会在某个200px以下调整大小;
编辑这是完整的代码
<!doctype html>
<html>
<head>
<style>
#header{
height:60px;
width:100%;
background-color:#000;
position:fixed;
top:0;
left:0;
}
#leftdiv{
width:15%;
height:200px;
background-color:#ED6062;
float:left;
position:fixed;
left:0;
top:60px;
min-width:100px;
}
#middlediv{
width:25%;
height:200px;
background-color:#F0E92B;
float:left;
position:fixed;
left:15%;
top:60px;
}
#rightdiv{
width:60%;
height:200px;
background-color:#26D978;
float:left;
position:fixed;
left:40%;
top:60px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='header'></div>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</body>
</html>
JSFiddle https://jsfiddle.net/85mpvxo7/
1 回答
min-width
按预期工作,你的问题是#middlediv
有left: 15%
并且位于#leftdiv
之上,#leftdiv
实际上比你在#middlediv
后面看到的要宽 .我'm not sure if it fullfills all your requirements, but check this, I' m使用带有网格显示的div包装器,因此左网格项的宽度为
max-content
. 然后其他两个div需要使用剩余的空间,所以我把它们放在另一个div中 . https://jsfiddle.net/n3o679pf/编辑:它可以更清洁只使用包装https://jsfiddle.net/n3o679pf/2/上的flex,所以不需要使用网格的那个丑陋的
#therest
div .和CSS