时间戳

首页 > 解决方案 > 位置固定为最小宽度？

html - 位置固定为最小宽度？

问题描述

我正在尝试向使用固定位置的 div 添加最小宽度。如果我删除固定位置，我不确定下面的代码是否可以正常工作。

我想要实现的是保护红色区域中的文本（包含链接）不被调整到低于某个 200 像素；

编辑这是完整的代码

<!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/

标签： htmlcssfixed

解决方案

按预期工作，你的min-width问题是它#middlediv有left: 15%并且在上面#leftdiv并且#leftdiv实际上比你在后面看到的更宽#middlediv。

我不确定它是否满足您的所有要求，但请检查一下，我正在使用带有网格显示的 div 包装器，因此左侧网格项的宽度为max-content. 然后其他两个 div 需要使用其余空间，所以我将它们放在另一个 div 中。https://jsfiddle.net/n3o679pf/

编辑：在包装器https://jsfiddle.net/n3o679pf/2/上仅使用 flex 可以更清洁，因此不需要#therest我使用网格放置的那个丑陋的 div。

<div id='header'></div>
<div id='wrapper'>
  <div id='leftdiv'>Contains links</div>
  <div id='middlediv'></div>
  <div id='rightdiv'></div>
</div>

和 CSS

#wrapper {
  display: flex;
  width: 100%;
  position: fixed;
  top:60px;
  margin: 0;
}
#leftdiv{
    height:200px;
    background-color:#ED6062;
    min-width:200px;
}
#middlediv{
    width:35%;
    height:200px;
    background-color:#F0E92B;
}
#rightdiv{
    width:65%;
    height:200px;
    background-color:#26D978;
}

推荐阅读