自动调整 div 的大小

Posted 2023-03-06

【中文标题】自动调整 div 的大小

【英文标题】：Automatically Resize a div

【发布时间】：2015-07-28 01:55:07

【问题描述】：

当我缩小浏览器窗口时，以“打开”开头的文本最终占据了几行，我无法将下面的所有内容都向下推。取而代之的是，按钮和隐藏，并且主图像被文本挡住了。如何让调整大小自动发生？网址是：http://opensimulationsystems.org/

我尝试将“height:auto”添加到 Chrome 开发者工具的导航栏标题中，但“auto”不是一个选项。我正在使用 Bootstrap 主题模板。

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href=".">Open Simulation Systems: The Common Agent-Based Simulation Framework (CABSF) & The Agent and Simulation Repository</a>

【问题讨论】：

能贴出相关的CSS吗？

我不是很肯定，但最近我一直在学习名为 rem 的 size 属性，我的好奇心是在调整窗口大小时它会调整大小，如果不是，您可以为此使用媒体查询。

建议：如果您希望人们能够在小屏幕上查看网站，也许您应该缩短网站标题或使用较小的字体。

【参考方案1】：

是float:left 使其重叠。对于较小的屏幕尺寸，您可以通过 media 查询应用特定样式，例如

@media (max-width: 500px) 
        .navbar-brand 
          float: none;
          height:auto;
        
 

【参考方案2】：

这是因为 navbar-brand 类是浮动的。

一种解决方法是使用media query 处理CSS 上的小屏幕，将navbar-brand 设置为不浮动。像这样的：

@media screen and (max-width: 700px)
  .navbar-brand 
    float: none;
  

【参考方案3】：

如果您要从 .navbar-brand 中删除 float:left 元素样式，那么您必须使用填充和所有其他内容再次设置标题。

但是，如果您从 .navbar-brand 中删除 height:50px，那么它将自动设置所有内容。在媒体查询中可以调整.navbar-brand.的宽度