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

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 会得到符合您想要的结果。