iT邦幫忙

0

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

jquery css
mayyola 2017-11-30 14:44:23 ‧ 6840 瀏覽

  • 分享至 

  • twitterImage

大家好:

總共有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>
窮嘶發發發 iT邦高手 1 級 ‧ 2017-12-01 13:21:41 檢舉
S4 指定 33.3%，這個不是很建議這麼寫，因為某些瀏覽器，會把留白跟外框的大小另外算
也有是說假如每個區塊外框 1% 留白 1%，一列三個區塊，要扣掉 1%*6 + 1% *6 = 12%
所以，這裡定 33.3% 在某些瀏覽器會一列有可能只放得下兩個區塊，後面哪一個會被擠掉
要細算需要多少寬度，建議用下 calc 計算會比較準
mayyola iT邦研究生 2 級 ‧ 2017-12-04 10:54:44 檢舉
請問*6是指甚麼呢? 要怎麼看有沒有留白?因為我CSS好像沒寫到留白..謝謝
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
小斑
iT邦新手 3 級 ‧ 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邦研究生 2 級 ‧ 2017-11-30 15:53:25 檢舉

小斑您好:

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

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

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

mayyola iT邦研究生 2 級 ‧ 2017-12-04 10:53:49 檢舉

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

登入發表回應
0
kyoe
iT邦新手 5 級 ‧ 2017-11-30 15:22:31

css width 100%,item 33%

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

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙