誰かが私にどのようにCSSから画像を配置することができますか?私はページの一番上の一行にそれらを持っていますが、私はクラスで行うことができるように手動でそれぞれの位置を求めます。ここで配列から画像を配置する
.twelfth {
position:absolute;
top: 35%;
left: 75%;
z-index:2;
}
は、現時点で私が持っているコードです:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="stils.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<script>
function random_imglink(select) {
if (select > 5) {
}
var myimages = new Array();
myimages[0] = "monalisa.jpg"
myimages[1] = "monalisa.jpg"
myimages[2] = "monalisa.jpg"
myimages[3] = "monalisa.jpg"
myimages[4] = "monalisa.jpg"
myimages[5] = "monalisa.jpg"
myimages[6] = "monalisa.jpg"
myimages[7] = "monalisa.jpg"
myimages[8] = "monalisa.jpg"
myimages[9] = "monalisa.jpg"
myimages[10] = "monalisa.jpg"
myimages[11] = "monalisa.jpg"
myimages[12] = "monalisa.jpg"
//specify corresponding links below
var imagelinks = new Array()
imagelinks[0] = "http://www.facebook.com"
imagelinks[1] = "http://www.w3schools.com"
imagelinks[2] = "http://www.microsoft.com"
imagelinks[3] = "http://www.dynamicdrive.com"
imagelinks[4] = "http://www.freewarejava.com"
imagelinks[5] = "http://www.tutorialspoint.com"
imagelinks[6] = "http://www.netscape.com"
imagelinks[7] = "http://www.codepen.io"
imagelinks[8] = "http://www.youtube.com"
imagelinks[9] = "http://www.imdb.com"
imagelinks[10] = "http://www.google.com"
imagelinks[11] = "http://www.apple.com"
imagelinks[12] = "http://www.skype.com"
var size = myimages.length
for (var i = 0; i < select; i++) {
var index = Math.floor(Math.random() * size);
document.write('<a href=' + '"' + imagelinks[index] + '"' + '><img src="' + myimages[index] + '" border=0 width="10%"></a>');
var tmp = myimages[index];
myimages[index] = myimages[size - 1];
myimages[size - 1] = tmp;
tmp = imagelinks[index];
imagelinks[index] = imagelinks[size - 1];
imagelinks[size - 1] = tmp;
--size;
}
}
random_imglink(12);
</script>
</body>
</html>
写真はリンクとして機能していません。リンクはありますが、写真と同じ行にあり、写真の後の空白部分に続きます。ページはスクロールバーを使用せずに画面に収まる必要がありますが、リンクのために表示されません。ここに何か提案はありますか? – Sta
タグスタイルに '{display:block}'を追加してみてください – sadpanda