logo标签列表

在两列中显示列表项

htmlcss
4
如果您运行以下代码片段或 [ jsfiddle https://jsfiddle.net/3xdfwsk7/1/ ]，当我们将鼠标悬停在第二个图像上时，您可以看到apple1到apple12的值。但是我想要显示一个列中的苹果1-苹果7和另一个列中的苹果8-苹果12。 现在： enter image description here 我需要的是： enter image description here 

#narrow-by-list { display :none;}
.choose1 
{ 
text-transform: capitalize; 
text-align: center;
font-weight:bold;
font-size:18px;
color: #000000;
}
.links1234 { color : #908983;}
.links1234:hover { color : #f85700;}


.grow {
  padding: 5px 5px 5px 5px;
  border-radius: 10px;
  width: 23%;
  margin: 5px 1% 5px 1%;
  float: left;
  position: relative;
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  text-align: center;
  background-color : #fff;
  
}
.grow:hover ul{
  display: block;
}

.grow ul {
  margin: 0;
  padding: 5px;
  list-style: none;
  display: none;
  position: absolute;
  z-index: 1;
  background: #fff;
  box-shadow: 0 0 5px 1px rgba(0,0,0,.25);
  left: 0;
  right: 0;
}

.grow img{
  width: 100%;
}

.expand 
{
 position:relative;
 right:8px;
 top:4px;
}
<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
 <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
    </li>
  </ul>
</div>

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 1</a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 2 </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 3 </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4 </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 5 </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 6 </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 7 </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 8 </a>
    </li>
 <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 9 </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 10 </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 11 </a>
    </li>
    <li>
      <a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 12 </a>
    </li>
  </ul>
</div>

注意：如果我们有超过7个值，我需要只显示2列，如果我们把鼠标悬停在第一张图片上，只显示4个值，因此我不希望以4列显示。

这个问题并不是重复的，因为当我使用其他问题的答案时，我的列宽就会被破坏...

可能是重复的问题：如何将列表项显示为列？ - Lalji Tadhani
@LaljiTadhani 请检查这个链接，并帮帮我：现在我想增加列宽。 - user6619012
将2的列数更改为3。 - Lalji Tadhani
添加 ul 宽度，然后增加列宽。 - Lalji Tadhani
非常感谢您的支持..... @LaljiTadhani - user6619012
显示剩余2条评论
2个回答
3
请使用以下CSS：
.grow:hover ul{
  display: block;
  column-count: 2;
}
.grow:hover ul li{
    display: inline-table;
    padding: 5px 12px;
}
现在它显示为这样：http://prnt.sc/cmxu3j 在此链接链接中，你可以帮我把它显示为问题中的第二张图片吗？ - user6619012
它适用于所有图像，这意味着如果您将鼠标悬停在任何图像上，值将显示在2列中，但我不想要那样，我只想要如果图像有更多值，则在2列中显示。请在上面的链接中将鼠标悬停在其他图像上。 - user6619012
在我使用此代码之后，现在第一张图像的值也显示在两列中：http://prnt.sc/cmxzbz - user6619012
2
使用CSS3中的column-count属性。
请帮我解决这个问题：链接。 - user6619012
有很多种方法。你尝试过使用旧版本的jQuery noconflict模式吗？ - bjoster
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接