列数：自动CSS不扩展/缩放宽度

分类：编程问答

如何解决列数：自动CSS不扩展/缩放宽度

我正在尝试在菜单悬停时创建多列子菜单。

要达到这个目的，我使用了column-count：auto; ，column-width：150px;和列填充：自动；高度固定。

但是拆分列的宽度没有扩大。在示例中，白色背景未根据自动列宽缩放。当我使用column-count时：2;由于硬编码整数工作正常，但是我不想使用硬编码整数，它是基于高度的多列。

这里是小提琴链接https://jsfiddle.net/1cga0jro/2/

为什么这没有扩大宽度，任何帮助，任何建议？

HTML： 

.nav {
  background: brown;
  /*@media only screen and (max-width: 1087px) {
    display: none;
  }*/
}

.nav ul.main_navigation {
  list-style: none;
  margin: 0;
  max-width: 1204px;
  position: relative;
}

.nav ul.main_navigation a {
  text-decoration: none;
}

.nav ul.main_navigation .sub_menu {
  list-style: none;
  padding: 0;
}

.nav ul.main_navigation .sub_menu li {
  font-size: 15px;
  font-weight: bold;
  line-height: 16px;
  letter-spacing: 0.3px;
  max-width: 213px;
}

.nav ul.main_navigation .sub_menu li .sub_menu {
  list-style: none;
  padding: 5px 0 18px;
}

.nav ul.main_navigation .sub_menu li .sub_menu a {
  font-size: 12px;
  line-height: 15px;
  font-weight: normal;
  color: #000;
  padding-bottom: 5px;
  display: block;
}

.nav ul.main_navigation>li {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  line-height: normal;
  letter-spacing: 0.4px;
  padding: 30px 10px;
  margin: 0 5px;
}

.nav ul.main_navigation>li>a {
  color: #fff;
}

/*.nav ul.main_navigation>li>.main_sub_menu {
  display: none;
}*/

.nav ul.main_navigation>li:hover {
  background: #ededed;
}

.nav ul.main_navigation>li:hover>a {
  color: #000;
}

.nav ul.main_navigation>li:hover .main_sub_menu {
  display: block;
}

.nav ul.main_navigation>li>.main_sub_menu {
  position: absolute;
  top: 81px;
  list-style: none;
  max-width: 999px;
  padding: 0;
  background: #ededed;
  z-index: 9;
}

.nav ul.main_navigation>li>.main_sub_menu .grid {
  padding: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-height: 250px;
}


.column-auto {
  -webkit-column-count: auto;
  -moz-column-count: auto;
  column-count: auto;
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
  -webkit-column-width: 150px;
  -moz-column-width: 150px;
  column-width: 150px;

}

.nav ul.main_navigation>li>.main_sub_menu .grid .column:last-child {
  margin-right: 0;
}

.nav ul.main_navigation>li>.main_sub_menu .grid .col-1,.nav ul.main_navigation>li>.main_sub_menu .grid .col-2,.nav ul.main_navigation>li>.main_sub_menu .grid .col-3 {
  padding: 10px 10px 0;
  background: #fff;
  border-radius: 5px;
  margin-right: 10px;
}

.center {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>        
  </head>

  <body>

    <div class="nav">
      <ul class="main_navigation">
        <li><span href="">PRODUCT</span>
          <ul class="main_sub_menu sub_menu">
            <div class="grid">
              <div class="column col-1">
                <li><span>Mobile</span>
                  <ul class="sub_menu">
                    <li><a href="">Mobile 1</a></li>
                    <li><a href="">Mobile 2</a></li>
                    <li><a href="">Mobile 3</a></li>
                  </ul>
                </li>
              </div>

              <div class="column col-2 column-auto">

                <li><span>Mobile</span>
                  <ul class="sub_menu">
                    <li><a href="">Mobile 1</a></li>
                    <li><a href="">Mobile 2</a></li>
                    <li><a href="">Mobile 3</a></li>
                  </ul>
                </li>

                <li><span>Mobile</span>
                  <ul class="sub_menu">
                    <li><a href="">Mobile 1</a></li>
                    <li><a href="">Mobile 2</a></li>
                    <li><a href="">Mobile 3</a></li>
                  </ul>
                </li>

                <li><span>Mobile</span>
                  <ul class="sub_menu">
                    <li><a href="">Mobile 1</a></li>
                    <li><a href="">Mobile 2</a></li>
                    <li><a href="">Mobile 3</a></li>
                  </ul>
                </li>
              </div>

            </div>
          </ul>
        </li>
      </ul>
    </div>
  </body>

</html>

实际结果：

enter image description here

预期结果：

enter image description here

解决方法

我不确定您是否能如期实现目标，而是为您提供以下解决方案。我在CSS底部添加了一些CSS，并在.grid中添加了注释/添加了一些CSS。我还删除了类column-auto。这个想法是使用flexbox。

演示：

.nav {
  background: brown;
  /*@media only screen and (max-width: 1087px) {
    display: none;
  }*/
}

.nav ul.main_navigation {
  list-style: none;
  margin: 0;
  max-width: 1204px;
  position: relative;
}

.nav ul.main_navigation a {
  text-decoration: none;
}

.nav ul.main_navigation .sub_menu {
  list-style: none;
  padding: 0;
}

.nav ul.main_navigation .sub_menu li {
  font-size: 15px;
  font-weight: bold;
  line-height: 16px;
  letter-spacing: 0.3px;
  max-width: 213px;
}

.nav ul.main_navigation .sub_menu li .sub_menu {
  list-style: none;
  padding: 5px 0 18px;
}

.nav ul.main_navigation .sub_menu li .sub_menu a {
  font-size: 12px;
  line-height: 15px;
  font-weight: normal;
  color: #000;
  padding-bottom: 5px;
  display: block;
}

.nav ul.main_navigation>li {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  line-height: normal;
  letter-spacing: 0.4px;
  padding: 30px 10px;
  margin: 0 5px;
}

.nav ul.main_navigation>li>a {
  color: #fff;
}

/*.nav ul.main_navigation>li>.main_sub_menu {
  display: none;
}*/

.nav ul.main_navigation>li:hover {
  background: #ededed;
}

.nav ul.main_navigation>li:hover>a {
  color: #000;
}

.nav ul.main_navigation>li:hover .main_sub_menu {
  display: block;
}

.nav ul.main_navigation>li>.main_sub_menu {
  position: absolute;
  top: 81px;
  list-style: none;
  max-width: 999px;
  padding: 0;
  background: #ededed;
  z-index: 9;
}

.nav ul.main_navigation>li>.main_sub_menu .grid {
/*  padding: 20px;*/      /*** COMMENTED***/
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-height: 250px;
  max-width: unset; /** ADDED **/
}


.column-auto {
  -webkit-column-count: auto;
  -moz-column-count: auto;
  column-count: auto;
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
  -webkit-column-width: 150px;
  -moz-column-width: 150px;
  column-width: 150px;

}

.nav ul.main_navigation>li>.main_sub_menu .grid .column:last-child {
  margin-right: 0;
}

.nav ul.main_navigation>li>.main_sub_menu .grid .col-1,.nav ul.main_navigation>li>.main_sub_menu .grid .col-2,.nav ul.main_navigation>li>.main_sub_menu .grid .col-3 {
  padding: 10px 10px 0;
  background: #fff;
  border-radius: 5px;
  /*margin-right: 10px;*/
}




.center {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

/***************** CSS ADDED *****************/
.col-1,.col-2{
  border: 20px solid #ededed;
}
li .col-1{
  border-right: none;
}
.col-2{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 100%;
  min-width: -webkit-fill-available;
  min-width: -moz-available;
}

.col-2 li{
  display:block;
  margin-left: 5px;
  margin-right: 5px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link href="menu.css" rel="stylesheet">
</head>

<body>

<div class="nav">
  <ul class="main_navigation">
    <li><span href="">PRODUCT</span>
      <ul class="main_sub_menu sub_menu">
        <li class="grid">
          <ul class="column col-1">
            <li><span>Mobile</span>
              <ul class="sub_menu">
                <li><a href="">Mobile 1</a></li>
                <li><a href="">Mobile 2</a></li>
                <li><a href="">Mobile 3</a></li>
              </ul>
            </li>
          </ul>

          <ul class="column col-2">

            <li><span>Mobile</span>
              <ul class="sub_menu">
                <li><a href="">Mobile 1</a></li>
                <li><a href="">Mobile 2</a></li>
                <li><a href="">Mobile 3</a></li>
              </ul>
            </li>

            <li><span>Mobile</span>
              <ul class="sub_menu">
                <li><a href="">Mobile 1</a></li>
                <li><a href="">Mobile 2</a></li>
                <li><a href="">Mobile 3</a></li>
              </ul>
            </li>

            <li><span>Mobile</span>
              <ul class="sub_menu">
                <li><a href="">Mobile 1</a></li>
                <li><a href="">Mobile 2</a></li>
                <li><a href="">Mobile 3</a></li>
              </ul>
            </li>
          </ul>

        </li>
      </ul>
    </li>
    <li><span href="">ITEMS</span>
      

    </li>
  </ul>
</div>
</body>

</html>

,

因为环绕column-auto的div宽度不足。因此它找不到自动创建列的宽度。

See the width of .sub_menu

我刚刚添加了这些行。这可以按预期工作。

.main_sub_menu,.column-auto{
  width: 100%; /* or you can use static width */
}

.main_sub_menu {
  left: 0;
}


/* added start */
.main_sub_menu,.column-auto{
  width: 100%;
}

.main_sub_menu {
  left: 0;
}
/* added end */

.nav {
  background: brown;
  /*@media only screen and (max-width: 1087px) {
    display: none;
  }*/
}

.nav ul.main_navigation {
  list-style: none;
  margin: 0;
  max-width: 1204px;
  position: relative;
}

.nav ul.main_navigation a {
  text-decoration: none;
}

.nav ul.main_navigation .sub_menu {
  list-style: none;
  padding: 0;
}

.nav ul.main_navigation .sub_menu li {
  font-size: 15px;
  font-weight: bold;
  line-height: 16px;
  letter-spacing: 0.3px;
  max-width: 213px;
}

.nav ul.main_navigation .sub_menu li .sub_menu {
  list-style: none;
  padding: 5px 0 18px;
}

.nav ul.main_navigation .sub_menu li .sub_menu a {
  font-size: 12px;
  line-height: 15px;
  font-weight: normal;
  color: #000;
  padding-bottom: 5px;
  display: block;
}

.nav ul.main_navigation>li {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  line-height: normal;
  letter-spacing: 0.4px;
  padding: 30px 10px;
  margin: 0 5px;
}

.nav ul.main_navigation>li>a {
  color: #fff;
}


/*.nav ul.main_navigation>li>.main_sub_menu {
  display: none;
}*/

.nav ul.main_navigation>li:hover {
  background: #ededed;
}

.nav ul.main_navigation>li:hover>a {
  color: #000;
}

.nav ul.main_navigation>li:hover .main_sub_menu {
  display: block;
}

.nav ul.main_navigation>li>.main_sub_menu {
  position: absolute;
  top: 81px;
  list-style: none;
  max-width: 999px;
  padding: 0;
  background: #ededed;
  z-index: 9;
}

.nav ul.main_navigation>li>.main_sub_menu .grid {
  padding: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-height: 250px;
}

.column-auto {
  -webkit-column-width: 150px;
  -moz-column-width: 150px;
  column-width: 150px;
}

.nav ul.main_navigation>li>.main_sub_menu .grid .column:last-child {
  margin-right: 0;
}

.nav ul.main_navigation>li>.main_sub_menu .grid .col-1,.nav ul.main_navigation>li>.main_sub_menu .grid .col-3 {
  padding: 10px 10px 0;
  background: #fff;
  border-radius: 5px;
  margin-right: 10px;
}

.center {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

  <div class="nav">
    <ul class="main_navigation">
      <li><span href="">PRODUCT</span>
        <ul class="main_sub_menu sub_menu">
          <div class="grid">
            <div class="column col-1">
              <li><span>Mobile</span>
                <ul class="sub_menu">
                  <li><a href="">Mobile 1</a></li>
                  <li><a href="">Mobile 2</a></li>
                  <li><a href="">Mobile 3</a></li>
                </ul>
              </li>
            </div>

            <div class="column col-2 column-auto">

              <li><span>Mobile</span>
                <ul class="sub_menu">
                  <li><a href="">Mobile 1</a></li>
                  <li><a href="">Mobile 2</a></li>
                  <li><a href="">Mobile 3</a></li>
                </ul>
              </li>

              <li><span>Mobile</span>
                <ul class="sub_menu">
                  <li><a href="">Mobile 1</a></li>
                  <li><a href="">Mobile 2</a></li>
                  <li><a href="">Mobile 3</a></li>
                </ul>
              </li>

              <li><span>Mobile</span>
                <ul class="sub_menu">
                  <li><a href="">Mobile 1</a></li>
                  <li><a href="">Mobile 2</a></li>
                  <li><a href="">Mobile 3</a></li>
                </ul>
              </li>
            </div>

          </div>
        </ul>
      </li>
    </ul>
  </div>
</body>

</html>

,

您可以将显示网格用于该所需布局的电量自动显示。

.column-auto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
}

这将为您提供所需的布局。

这是一个有效的示例。 https://jsfiddle.net/42r5wax6/

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot