количество столбцов: автоматический css не расширяется / не масштабируется по ширине

#html #jquery #css #sass #less

#HTML #jquery #css #sass #Меньше

Вопрос:

Я пытаюсь создать подменю с несколькими столбцами при наведении курсора меню.

Для достижения этого я использовал column-count: auto; , column-width: 150px; и column-fill: auto; с фиксированной высотой.

Но ширина разделенного столбца не увеличивается. В примере белый фон не масштабируется в соответствии с автоматической шириной столбца. Когда я использую 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>  

Фактический результат:
введите описание изображения здесь

Ожидаемый результат:
введите описание изображения здесь

Комментарии:

1. Вы div правы ul , вы не должны этого делать.

2. @MaxiGui я попробовал, изменив div на ul и li , но проблема все еще существует…. Вот скрипка jsfiddle.net/1cga0jro/3

Ответ №1:

Потому что перенос divs column-auto не имеет достаточной ширины. Поэтому он не может найти ширину для автоматического создания столбцов.

Посмотрите ширину .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-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>  

Комментарии:

1. На мобильном вертикальном представлении это не работает … codepen.io/Maxigui/pen/eYzgXNY

2. @MaxiGui, потому что вы используете max-height: 250px . Посмотрите на это i.stack.imgur.com/v6Wqu.png

3. В приведенном выше коде я просто скопировал ваш код, поэтому я ничего не использую. Я просто указывал на тот факт, что на мобильных устройствах вертикально это не работает. (Я не тот, кто задает вопрос)

Ответ №2:

Я не уверен, сможете ли вы достичь своей цели, как вы это делаете, вместо этого я предлагаю вам следующее решение. Я добавил немного CSS в нижней части вашего CSS и прокомментировал / добавил некоторые .grid . Я также удаляю класс 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>  

Комментарии:

1. Ранее я пробовал это решение, но flex-direction: column; оно работает некорректно в Firefox. Как только столбец разрывается, он не расширяет ширину так же, как column-count: auto;

2. @Kango это ломается в Mozilla, потому что вам нужно установить min-width: -moz-available; , попробуйте еще раз, сейчас. И он также корректно работает в Safari

Ответ №3:

вы можете использовать сетку отображения для coulmn auto для этого желаемого макета.

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

Это даст вам желаемый макет, который вы хотите.

Вот рабочий пример. https://jsfiddle.net/42r5wax6 /