1. 首頁
  2. 問答
  3. 用於排列圖像鏈接的HTML

用於排列圖像鏈接的HTML

2017-09-05 68 views
0

我是一個非常環保的HTML新手，但我已經將它和在線代碼一起拼湊起來。用於排列圖像鏈接的HTML

唯一的問題是這18個圖像應該排列成3行6列（同時保持當前的懸停和鏈接功能），而不是像當前那樣垂直堆疊。有任何想法嗎？

.containerS1IR { 
 
    position: relative; 
 
    width: 15%; 
 
} 
 

 
.imageS1IR { 
 
    opacity: 1; 
 
    display: float; 
 
    left; 
 
    width: 50%; 
 
    height: auto; 
 
    transition: .5s ease; 
 
    backface-visibility: hidden; 
 
    cursor: pointer; 
 
} 
 

 
.middleS1IR { 
 
    transition: .5s ease; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 49%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%) 
 
} 
 

 
.containerS1IR:hover .imageS1IR { 
 
    opacity: 0.5; 
 
} 
 

 
.containerS1IR:hover .middleS1IR { 
 
    opacity: .80; 
 
} 
 

 
.textS1IR { 
 
    background-color: maroon; 
 
    color: white; 
 
    font-size: 20px; 
 
    padding: 5px 15px; 
 
}
<h1> 
 
    <font color="#80000" size="+2"> 
 
    <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();"> 
 
     The Office of Institutional Research has made the new menu below available for up and coming intuitive web-based reporting. Hover and click the images to navigate. 
 
    </marquee> 
 
    </font> 
 
</h1> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/jsn40Sd.png" alt="Enrollment Report Link" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Overall Enrollment</div> 
 
    </div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/2XkEJjY.png" alt="Freshmen Cohort Link" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Freshmen Cohort</div> 
 
    </div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/4yA0mlU.png" alt="Student Sub-Populations Link" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Student Sub-Populations</div> 
 
    </div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/V2666d5.png" alt="Enrollment to Date Link" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Enrollment to Date</div> 
 
    </div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/alt1B7g.png" alt="Student Success Link" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Student Success</div> 
 
    </div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/HcC3UCA.png" alt="Academic Costs and Productivity Link" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Academic Costs and Productivity</div> 
 
    </div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/x9LIrOH.png" alt="Academic Outcomes Link" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Academic Outcomes</div> 
 
    </div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/084vJ33.png" alt="Finances Link" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Finances</div> 
 
    </div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/wgyN38M.png" alt="Human Resources Link" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Human Resources</div> 
 
    </div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/sCN2zbS.png" alt="Infrastructure Link" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Infrastructure</div> 
 
    </div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/u56c9fv.png" alt="Coming Soon" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Coming Soon</div> 
 
    </div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/zcZeURw.png" alt="Coming Soon" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Coming Soon</div> 
 
    </div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/r1LNJZl.png" alt="Coming Soon" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Coming Soon</div> 
 
    </div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/5BAaZE3.png" alt="Coming Soon" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Coming Soon</div> 
 
    </div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/BhZlD2g.png" alt="Coming Soon" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Coming Soon</div> 
 
    </div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/1Cj8Lhu.png" alt="Coming Soon" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Coming Soon</div> 
 
    </div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/ADhQmDa.png" alt="Coming Soon" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Coming Soon</div> 
 
    </div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
    <img src="https://i.imgur.com/96ccSVQ.png" alt="Coming Soon" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
    <div class="middleS1IR"> 
 
    <div class="textS1IR">Coming Soon</div> 
 
    </div> 
 
</div>

謝謝各位大大提前， 林賽

來源

2017-09-05 user3795203

+0

如果您只是將'display：inline-block;'添加到您的'.containerS1IR'類中，那就行得通了。 –

+0

這比我想象的要簡單得多！非常感謝你肯！ – user3795203

回答

2

所有你需要的是float容器，所以它不會佔用整個寬度，作爲一個塊級元素通常確實。

.containerS1IR { 
 
position: relative; 
 
width: 15%; 
 
float: left; 
 
} 
 

 
.imageS1IR { 
 
opacity: 1; 
 
width: 50%; 
 
height: auto; 
 
transition: .5s ease; 
 
backface-visibility: hidden; 
 
cursor: pointer; 
 
} 
 

 
.middleS1IR { 
 
transition: .5s ease; 
 
opacity: 0; 
 
position: absolute; 
 
top: 50%; 
 
left: 49%; 
 
transform: translate(-50%, -50%); 
 
-ms-transform: translate(-50%, -50%) 
 
} 
 

 
.containerS1IR:hover .imageS1IR { 
 
opacity: 0.5; 
 
} 
 

 
.containerS1IR:hover .middleS1IR { 
 
opacity: .80; 
 
} 
 

 
.textS1IR { 
 
background-color: maroon; 
 
color: white; 
 
font-size: 20px; 
 
padding: 5px 15px; 
 
}
<h1><font color="#80000" size="+2"> 
 
<marquee behavior="scroll" direction="left" onmouseover="this.stop();" 
 
onmouseout="this.start();"> 
 
The Office of Institutional Research has made the new menu below available 
 
for up and coming intuitive web-based reporting. Hover and click the images 
 
to navigate. 
 
</marquee></font></h1> 
 

 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/jsn40Sd.png" alt="Enrollment Report Link" 
 
class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Overall Enrollment</div> 
 
</div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/2XkEJjY.png" alt="Freshmen Cohort Link" 
 
class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Freshmen Cohort</div> 
 
</div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/4yA0mlU.png" alt="Student Sub-Populations Link" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Student Sub-Populations</div> 
 
</div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/V2666d5.png" alt="Enrollment to Date Link" 
 
class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Enrollment to Date</div> 
 
</div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/alt1B7g.png" alt="Student Success Link" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Student Success</div> 
 
</div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/HcC3UCA.png" alt="Academic Costs and Productivity Link" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Academic Costs and Productivity</div> 
 
</div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/x9LIrOH.png" alt="Academic Outcomes Link" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Academic Outcomes</div> 
 
</div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/084vJ33.png" alt="Finances Link" 
 
class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Finances</div> 
 
</div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/wgyN38M.png" alt="Human Resources Link" 
 
class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Human Resources</div> 
 
</div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/sCN2zbS.png" alt="Infrastructure Link" 
 
class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Infrastructure</div> 
 
</div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/u56c9fv.png" alt="Coming Soon" class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Coming Soon</div> 
 
</div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/zcZeURw.png" alt="Coming Soon" 
 
class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Coming Soon</div> 
 
</div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/r1LNJZl.png" alt="Coming Soon" 
 
class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Coming Soon</div> 
 
</div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/5BAaZE3.png" alt="Coming Soon" 
 
class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Coming Soon</div> 
 
</div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/BhZlD2g.png" alt="Coming Soon" 
 
class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Coming Soon</div> 
 
</div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/1Cj8Lhu.png" alt="Coming Soon" 
 
class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Coming Soon</div> 
 
</div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/ADhQmDa.png" alt="Coming Soon" 
 
class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Coming Soon</div> 
 
</div> 
 
</div> 
 

 
<div class="containerS1IR"> 
 
<img src="https://i.imgur.com/96ccSVQ.png" alt="Coming Soon" 
 
class="imageS1IR" style="width:100%" onclick="location.href='https://info.schreiner.edu/ICS/University_Resources/Institutional_Research/Census_Report.jnz';"> 
 
<div class="middleS1IR"> 
 
<div class="textS1IR">Coming Soon</div> 
 
</div> 
 
</div>

或者你可以使用display: inline-block，這將有同樣的效果。

來源

2017-09-05 01:24:35

+0

這比我想象的要簡單得多！非常感謝Chava！ – user3795203

0

把款式float:left添加到您的班級.containerS1IR。你的風格應該是這樣的：

.containerS1IR { 
position: relative; 
width: 15%; 
float:left; 
}

這裏Fiddle。 希望它有幫助

來源

2017-09-05 01:31:09

+0

這比我想象的要簡單得多！非常感謝你，謝謝！ – user3795203

+0

不客氣:) –

相關問題

 相關問題