Question

我有一个纯粹的CSS图像脚本，我用我的eBay列表，我正在改变我的模板的设计，并与代码遇到一个主要障碍，似乎只能显示大图像在缩略图单选按钮的正下方，但我希望将大图像显示在不同的表格单元格中。

我不太了解CSS，所以希望有人知道一个简单的解决方法吗？这是希望..

<style type="text/css">
div.Image1BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 110px 92px; }
div.Image2BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 110px 92px; }
div.Image3BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 110px 92px; }
div.Image4BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
div.Image5BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
div.Image1BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 600px 500px; }
div.Image2BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 600px 500px; }
div.Image3BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 600px 500px; }
div.Image4BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
div.Image5BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }

section {
  display: none;
}
input {
  display: none;
}
label {
  display: inline-block;
  font-weight: 600;
  color: #bbb;
  border: 1px solid transparent;
}
label:hover {
  cursor: hand;
  border: 1px solid #1F7AB6;
  box-shadow: 2px 2px 7px #d0d0d0;
}
label {
  margin: 0px 5px 0px 0px;
}
input:checked + label {
  border: 1px solid #155179;
  box-shadow: 2px 2px 7px #c0c0c0;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
  display: block;
}
</style>

<table border=1><tr><td>
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1"><div class="Image1BlockS"></div></label>
  <input id="tab2" type="radio" name="tabs">
  <label for="tab2"><div class="Image2BlockS"></div></label>
  <input id="tab3" type="radio" name="tabs">
  <label for="tab3"><div class="Image3BlockS"></div></label>
  <input id="tab4" type="radio" name="tabs">
  <label for="tab4"><div class="Image4BlockS"></div></label>
  <input id="tab5" type="radio" name="tabs">
  <label for="tab5"><div class="Image5BlockS"></div></label>
  <section id="content1">
  <div class="Image1BlockB"></div>
  </section>
  <section id="content2">
  <div class="Image2BlockB"></div>
  </section>
  <section id="content3">
  <div class="Image3BlockB"></div>
  </section>
  <section id="content4">
  <div class="Image4BlockB"></div>
  </section>
  <section id="content5">
  <div class="Image5BlockB"></div>
  </section>
</td></tr></table>

Answer 1

这基本上就是我想要做的，但是将大图像元素放入另一个单元格会破坏它，大图像不再显示，我需要重写它以便我可以将大图像放在整个模板中的任何位置

时，仍然可以让小缩略图更改它。

＆＃13;

<table border=1><tr><td>
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1"><div class="Image1BlockS"></div></label>
  <input id="tab2" type="radio" name="tabs">
  <label for="tab2"><div class="Image2BlockS"></div></label>
  <input id="tab3" type="radio" name="tabs">
  <label for="tab3"><div class="Image3BlockS"></div></label>
  <input id="tab4" type="radio" name="tabs">
  <label for="tab4"><div class="Image4BlockS"></div></label>
  <input id="tab5" type="radio" name="tabs">
  <label for="tab5"><div class="Image5BlockS"></div></label>
</td>

<td>
  <section id="content1">
  <div class="Image1BlockB"></div>
  </section>
  <section id="content2">
  <div class="Image2BlockB"></div>
  </section>
  <section id="content3">
  <div class="Image3BlockB"></div>
  </section>
  <section id="content4">
  <div class="Image4BlockB"></div>
  </section>
  <section id="content5">
  <div class="Image5BlockB"></div>
  </section>
</td>
</tr></table>

＆＃13;

Answer 2

我需要重写它，以便我可以将大图像放在任何地方整个模板，仍然可以有小缩略图点击它们就可以改变它。

如果是这种情况，那么您可以试用positioning。

另一方面，您可以使用table模仿display: table行为，使用td模仿display: table-cell，以使您更接近所需的结果。

* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}

div.Image1BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 110px 92px; }
div.Image2BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 110px 92px; }
div.Image3BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 110px 92px; }
div.Image4BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
div.Image5BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
div.Image1BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 600px 500px; }
div.Image2BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 600px 500px; }
div.Image3BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 600px 500px; }
div.Image4BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
div.Image5BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }

div.Image4BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
div.Image5BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }

#table {
  display: table; /* imitates the table behavior */
  border: 1px solid;
  border: 1px outset grey;
  padding: 1px;
}

.table-cell {
  margin: 1;
  border: thin inset grey;
  display: table-cell;
}

section {
  display: none;
}

input {
  display: none;
}

label {
  display: inline-block;
  font-weight: 600;
  color: #bbb;
  border: 1px solid transparent;
}

label:hover {
  cursor: hand;
  border: 1px solid #eee;
  box-shadow: 1px 1px 5px #000;
}

label {
  margin: 0 5px 0 0;
}

input:checked + label {
  border: 1px solid #155179;
  box-shadow: 2px 2px 7px #c0c0c0;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
  display: table-cell; /* imitates the td behavior */
  border: thin inset grey;
  margin: 1;
}

<div id="table">
  <tr>
    <td>
      <input id="tab1" type="radio" name="tabs" checked>
      <label for="tab1"><div class="Image1BlockS"></div></label>

      <input id="tab2" type="radio" name="tabs">
      <label for="tab2"><div class="Image2BlockS"></div></label>

      <input id="tab3" type="radio" name="tabs">
      <label for="tab3"><div class="Image3BlockS"></div></label>

      <input id="tab4" type="radio" name="tabs">
      <label for="tab4"><div class="Image4BlockS"></div></label>

      <input id="tab5" type="radio" name="tabs">
      <label for="tab5"><div class="Image5BlockS"></div></label>
    </td>
    
    <div class="table-cell">
      2nd cell
    </div>
    
    <td>
      3rd cell with the td element but without the border which doesn't work if there's no table element
    </td>
    
    <div class="table-cell">
      4th cell
    </div>
    
      <section id="content1">
        <div class="Image1BlockB"></div>
      </section>

      <section id="content2">
        <div class="Image2BlockB"></div>
      </section>

      <section id="content3">
        <div class="Image3BlockB"></div>
      </section>

      <section id="content4">
        <div class="Image4BlockB"></div>
      </section>

      <section id="content5">
        <div class="Image5BlockB"></div>
      </section>
  
  </tr>
</div>

纯CSS缩略图查看器，但放置问题

2 个答案: