Question

我有一个关于显示图像的问题。我已经从 codepen.io

创建了 DEMO

在此演示中，您可以看到有两个.image_container div。而这里面的div有树形象。显示树图像的第一个div和仅显示一个图像的第二个div（其他2个图像display:none;）。我想让它像第二个.image_container（显示第一个图像和display:none;其他两个或更多图像。）我怎么能做宽度jquery或CSS任何人都可以帮助我？

我尝试过这个javascript，但它是display：none;图像中的其他.image_container div。

的javascript

$(".image_container a:first-child").css("display", "block");

HTML

 <div class="container">
      <div class="image_container">
        <a href="#"><img src="http://fantasy-faction.com/wp-content/uploads/2014/04/Avatar.jpg"</a>
          <a href="#"><img src="http://upload.wikimedia.org/wikipedia/en/3/38/Avatarjakeneytiri.jpg"</a>
            <a href="#"><img src="http://fc09.deviantart.net/fs70/f/2010/015/8/9/Cristiano_Ronaldo_avatar_by_Tsunamy_boy.png"</a>
      </div>
      <div class="image_container">
         <a href="#"><img src="http://fantasy-faction.com/wp-content/uploads/2014/04/Avatar.jpg"</a>

          <a href="#" class="none"><img src="http://upload.wikimedia.org/wikipedia/en/3/38/Avatarjakeneytiri.jpg"</a>
            <a href="#" class="none"><img src="http://fc09.deviantart.net/fs70/f/2010/015/8/9/Cristiano_Ronaldo_avatar_by_Tsunamy_boy.png"</a>
            <div clas="need">Want to make like this</div>  
      </div>
    </div>

CSS

    body {
      background-color:#000;
    } 
    .container {
      margin:0px auto;
      width:650px;
      height:auto;
      margin-top:50px;
    }
    .image_container {
      float:left;
      width:300px;
      background-color:#ffffff;
      border-radius:3px;
      padding-bottom:30px;
      margin-right:20px;
    }
    .image_container  img {
      width:300px;
      height:auto;
    }
    .none {
      display:none;
    }
    .need {
      float:left;
      width:300px;
      background-color:red;
    }
.image_container a{display:none;}

Answer 1

我猜你的测试几乎是正确的。

您的问题不是CSS或JavaScript，而是HTML本身，它们是img标签未正确形成。它们是<img src="path_to_image"但应该img标签未正确形成。它们是<img src="path_to_image">（注意结束>）。

由于HTML形成不好，我不会假设选择浏览器定义的元素所需的规则。

但修复HTML会产生一个看起来像你想要的结果。

显示第一张图像并显示其他图像

1 个答案: