javascript - 显示第一张图片并显示让利图片

Question

我有一个关于显示图像的问题。我创建了这个 DEMO 来自 codepen.io

在此演示中，您可以看到有两个 .image_container div。而这个 div 里面有树形图像。第一个 div 显示 TreeMap 像，第二个 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 后的结果看起来符合您的要求。