大家好:
總共有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>
把
<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>
小斑您好:
可以了,我想請問您是怎麼看出來的是用css
w3-cell-row:before,.w3-cell-row:after 這語法是怎麼表示呢? 謝謝
您好,我是參考以下連結
W3.CSS Layout 參考
可以請問若ie瀏覽器不能看到最大的那張照片,是甚麼原因嗎? 謝謝><