我想限制我调整大小divs到最大和最小宽度

-1

我正在构建一个网站建立一个wordpress响应主题作为父。我在页面的左侧有一个内容部分（content-blog），在页面的右侧有一个侧边栏（小部件）。我让他们设置为缩小浏览器的大小，但我想设置一个最小宽度，以便它们不会在较小的浏览器上缩小。我希望侧边栏在特定宽度点的主要内容下移动。这里是我的HTML和CSS。我想限制我调整大小divs到最大和最小宽度

HTML：

<body> 
    <div id="header"> 
    /* content */ 
    </div> <!-- end header --> 

    <div id="container" class="hfeed"> 
    <div id="navigation"> 
    /*content */ 
    </div> <!-- end navigation --> 

    <div id="feature"> 
    /* content */ 
    </div> <!-- end feature --> 

    <div id="wrapper" class="clearfix"> 

    <div id="content-blog" class="grid col-620"> 
    /*content */ 
    </div> <!-- end content-blog --> 

    <div id="widgets" class="grid col-300 fit"> 
    /* content */ 
    </div> <!--end widgets --> 
    </div> <!-- end wrapper --> 

    <div id="footer" 
    /* content */ 
    </div> <!--end of footer- --> 

</body>

CSS：

body { 
background: none repeat scroll 0 0 #2D2C2A; 
color: #2D2C2A; 
} 

#container { 
max-width: 1100px; 
margin: auto; 
margin-top: 15px 
} 

#wrapper { 
max-width: 1010px; 
width: 100% 
margin: auto; 
margin-top: 15px; 
border: none; 
} 

#content-blog { 
margin-bottom: 20px; 
margin-top: 16px; 
max-width: 65%; 
min-width: 45%; 
width: auto; 
} 

#widgets { 
float: right; 
margin-top: 40px; 
max-width: 32%; 
width: auto; 
}

该网站是podcastanswers.com有没有什么帮助也。我曾尝试设置最小宽度，但不管浏览器缩小div的大小是否继续变小，从不停止在最小设置。我确信这是我错过了或者没有理解的东西，但是我一直没能在我的搜索中找到答案。谢谢大家。

来源

2014-01-06 user3166705

建立一个小提琴是不是添加更好指向该帖子的链接，因为该链接不会帮助未来的用户改变网页。 – Phlume

您可能想要使用[CSS媒体查询]（http://cssmediaqueries.com/） – zgood

为什么不按F12并查看您发布的网站实际上的工作方式:)您可以看到使用了媒体查询。 – ChandlerQ

百分比度量标准相对于屏幕的当前大小，而不是浏览器加载页面时设置的大小。因此，无论何时调整屏幕大小，min-width/max-width值也会改变（不确定这是否是您的问题，因为该示例相当耗时），但是，您似乎在尝试制作响应式设计，因此您应该使用媒体-queries。媒体查询的示例代码：

@media screen and (max-width: 1040px) and (min-width: 100px) { 
    #content { 
     width: 100%; 
    } 
}

这里有一些资源，这将帮助您了解并使用它们：

CSS-Tricks
Spec
MDN

来源

2014-01-06 20:26:03

我想限制我调整大小divs到最大和最小宽度

回答

相关问题