iT邦幫忙

0

jquery、css 如何將圖片排成一列3張

大家好:

總共有8張圖,現在是2X4(一列2張),請問要怎麼變成3X3的圖表示出來呢?

就是一列3張圖片,超過3張圖片就換第2列。 謝謝

<link rel="stylesheet"href="http://web.ee.nsysu.edu.tw/ezfiles/89/1089/img/1710/EE.css">
<div class="w3-content" style="max-width:1000px">
  <img class="mySlides" src="http://www.ee.nsysu.edu.tw/project/106/photo/1.jpg" style="width:100%">
  <img class="mySlides" src="http://www.ee.nsysu.edu.tw/project/106/photo/2.jpg" style="width:100%">
  <img class="mySlides" src="http://www.ee.nsysu.edu.tw/project/106/photo/3.jpg" style="width:100%">
  <img class="mySlides" src="http://www.ee.nsysu.edu.tw/project/106/photo/5.jpg" style="width:100%">
  <img class="mySlides" src="http://www.ee.nsysu.edu.tw/project/106/photo/4.jpg" style="width:100%">
  <img class="mySlides" src="http://www.ee.nsysu.edu.tw/project/106/photo/6.jpg" style="width:100%">
  <img class="mySlides" src="http://www.ee.nsysu.edu.tw/project/106/photo/7.jpg" style="width:100%">
  <img class="mySlides" src="http://www.ee.nsysu.edu.tw/project/106/photo/8.jpg" style="width:100%">

  
  <div class="w3-row-padding w3-section">
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="http://www.ee.nsysu.edu.tw/project/106/photo/1.jpg" style="width:100%" onclick="currentDiv(1)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="http://www.ee.nsysu.edu.tw/project/106/photo/2.jpg" style="width:100%" onclick="currentDiv(2)">
    </div>
     <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="http://www.ee.nsysu.edu.tw/project/106/photo/3.jpg" style="width:100%" onclick="currentDiv(3)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="http://www.ee.nsysu.edu.tw/project/106/photo/5.jpg" style="width:100%" onclick="currentDiv(4)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="http://www.ee.nsysu.edu.tw/project/106/photo/4.jpg" style="width:100%" onclick="currentDiv(5)">
    </div> 
     <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="http://www.ee.nsysu.edu.tw/project/106/photo/6.jpg" style="width:100%" onclick="currentDiv(6)">
    </div>
     <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="http://www.ee.nsysu.edu.tw/project/106/photo/7.jpg" style="width:100%" onclick="currentDiv(7)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="http://www.ee.nsysu.edu.tw/project/106/photo/8.jpg" style="width:100%" onclick="currentDiv(8)">
    </div>

    
  </div>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
  }
  x[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " w3-opacity-off";
}
</script>
S4 指定 33.3%,這個不是很建議這麼寫,因為某些瀏覽器,會把留白跟外框的大小另外算
也有是說假如每個區塊外框 1% 留白 1%,一列三個區塊,要扣掉 1%*6 + 1% *6 = 12%
所以,這裡定 33.3% 在某些瀏覽器會一列有可能只放得下兩個區塊,後面哪一個會被擠掉
要細算需要多少寬度,建議用下 calc 計算會比較準
mayyola iT邦新手 3 級 ‧ 2017-12-04 10:54:44 檢舉
請問*6是指甚麼呢? 要怎麼看有沒有留白?因為我CSS好像沒寫到留白..謝謝

2 個回答

0
小斑
iT邦新手 4 級 ‧ 2017-11-30 15:24:03
最佳解答

<div class="w3-row-padding w3-section">

改成

<div class="w3-cell-row">

試試看

<link rel="stylesheet"href="http://web.ee.nsysu.edu.tw/ezfiles/89/1089/img/1710/EE.css">
<div class="w3-content" style="max-width:1000px">
  <img class="mySlides" src="http://www.ee.nsysu.edu.tw/project/106/photo/1.jpg" style="width:100%">
  <img class="mySlides" src="http://www.ee.nsysu.edu.tw/project/106/photo/2.jpg" style="width:100%">
  <img class="mySlides" src="http://www.ee.nsysu.edu.tw/project/106/photo/3.jpg" style="width:100%">
  <img class="mySlides" src="http://www.ee.nsysu.edu.tw/project/106/photo/5.jpg" style="width:100%">
  <img class="mySlides" src="http://www.ee.nsysu.edu.tw/project/106/photo/4.jpg" style="width:100%">
  <img class="mySlides" src="http://www.ee.nsysu.edu.tw/project/106/photo/6.jpg" style="width:100%">
  <img class="mySlides" src="http://www.ee.nsysu.edu.tw/project/106/photo/7.jpg" style="width:100%">
  <img class="mySlides" src="http://www.ee.nsysu.edu.tw/project/106/photo/8.jpg" style="width:100%">

  
  <div class="w3-cell-row">
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="http://www.ee.nsysu.edu.tw/project/106/photo/1.jpg" style="width:100%" onclick="currentDiv(1)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="http://www.ee.nsysu.edu.tw/project/106/photo/2.jpg" style="width:100%" onclick="currentDiv(2)">
    </div>
     <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="http://www.ee.nsysu.edu.tw/project/106/photo/3.jpg" style="width:100%" onclick="currentDiv(3)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="http://www.ee.nsysu.edu.tw/project/106/photo/5.jpg" style="width:100%" onclick="currentDiv(4)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="http://www.ee.nsysu.edu.tw/project/106/photo/4.jpg" style="width:100%" onclick="currentDiv(5)">
    </div> 
     <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="http://www.ee.nsysu.edu.tw/project/106/photo/6.jpg" style="width:100%" onclick="currentDiv(6)">
    </div>
     <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="http://www.ee.nsysu.edu.tw/project/106/photo/7.jpg" style="width:100%" onclick="currentDiv(7)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="http://www.ee.nsysu.edu.tw/project/106/photo/8.jpg" style="width:100%" onclick="currentDiv(8)">
    </div>

    
  </div>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
  }
  x[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " w3-opacity-off";
}
</script>
mayyola iT邦新手 3 級 ‧ 2017-11-30 15:53:25 檢舉

小斑您好:

可以了,我想請問您是怎麼看出來的是用css
w3-cell-row:before,.w3-cell-row:after 這語法是怎麼表示呢? 謝謝

小斑 iT邦新手 4 級 ‧ 2017-11-30 16:06:18 檢舉

您好,我是參考以下連結
W3.CSS Layout 參考

mayyola iT邦新手 3 級 ‧ 2017-12-04 10:53:49 檢舉

可以請問若ie瀏覽器不能看到最大的那張照片,是甚麼原因嗎? 謝謝><

0
kyoe
iT邦新手 5 級 ‧ 2017-11-30 15:22:31

css width 100%,item 33%

不過這是學校作業嗎...?

我要發表回答

立即登入回答