0
我已經編寫代碼在div標籤內顯示圖像，並在不同div中的圖像下面顯示與其相關的文本。但我現在有4個div標籤和2個圖像。但我想將它們排列在同一行。但它顯示在其他div標籤下面這樣.. In the screenshot u can see i have added a image and below the image, text saying browse base layouts. both of them are in different div tags.. and then u can see i have added another image and text below the image as easy matchmaking strategy. and these two are also in different div tags.如何在同一行顯示多個div標籤的內容
但現在我想要在同一行上對齊兩個圖像。但他們現在對齊一個在另一個之下..任何人都可以請幫助我如何安排他們在同一行。這將是很大的幫助.. 這裏是html代碼： -
<!doctype html>
<html>
<head>
<link href="Layout.css" rel="stylesheet" type="text/css" />
<link href="Menu.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<div id="Holder">
<div id="Header"></div>
<div id="Heading1"><center><font size="+2" color="#FBFBFB">-Follow Us At-</font></center></div>
<div id="Heading1content"><center>
<a href="#"><img src="images/download.png" alt="Facebook" width="60" height="55" title="Facebook"/> </a>
<a href="#"><img src="images/images.jpg" width="60" height="60" alt="Google+" title="Google+"/></a>
<a href="#"><img src="images/download.jpg" width="64" height="60" alt="Twitter" title="Twitter"/></a>
</center></div>
<div id="Navbar">
<nav>
<ul>
<li><a href="#"> HOME</a> </li>
<li><a href="#">LOG IN</a></li>
<li><a href="#">BLOGS</a></li>
</ul>
</nav>
</div>
<hr/>
<div id="Heading2"><center><font size="+2" color="#FFFFFF">-Hi Clasher! What Are You Looking For?-</font></center> </div>
<div id="polaroid" align="center">
<a href="#"><img src="images/IMG-20160802-WA0012.jpg" alt="Base Layouts" title="Base Layouts"/></a>
</div>
<div id="text" align="center"><center><font size="+2" color="#F7F4F4"><a href="#">Browse Base Layouts</a></font></center></div>
<div id="polaroid">
<a href="#"><img src="images/IMG-20160802-WA0014.jpg" alt="War Strategy" title="Easy War Matchmaking Strategy"/></a></div>
<div id="text"><center><font size="+2" color="#F7F4F4"><a href="#">Easy War Matchmaking Strategy</a></font></center></div>
<hr/>
<div id="footer1">
</div>
<div id="footer2">
<center>
<font color="#F7F4F4" size="+1">Made With Love For All Clashers <br/>
© Brothers Gaming 2016</font>
</center>
</div>
</div>
</body>
</html>
這裏是CSS代碼.. layout.css中： -
#Holder {
width: 900px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
margin-bottom: 25px;
}
#Header {
height:200px;
background-image:url(images/main.jpg);
background-color:#CCCCCC;
background-repeat:no-repeat;
background-position:center;
margin-bottom: 5px;
}
#Heading1 {
height: 36px;
line-height: 32px;
background-color:#0B6D96;
margin-bottom: 11px;
}
#Navbar {
height: 55px;
margin-top: 8px;
margin-left:24%;
background-color:rgb(13, 13, 13);
width: 450px;
padding: 3px;
}
#Heading2 {
height: 36px;
background-color: #0B6D96;
margin-bottom: 11px;
line-height: 32px;
}
#polaroid{
width:45%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#text{
height:35px;
background-color:#253FB7;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom:11px;
width:45%;
line-height:32px;
}
#text a{
text-decoration:none;
color:#F7F4F4;
display:block;
}
#footer1{
height:200px;
width:900px;
background-color:#f0e6ff;
margin-top: 11px;
}
#footer2{
height:55px;
width:900px;
background-color:#000000;
line-height: 27px;
}
而且Menu.css： -
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
float: left;
display: block;
width: 150px;
height: 55px;
text-align:center;
line-height: 57px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:22px;
}
nav ul li a {
text-decoration:none;
color:#FFF;
}
nav ul li:hover {
background-color:rgb(242, 242, 242);
}
nav ul li:hover a {
display:block;
color:#000000;
}
這裏是網站：http://www.brothersgaming.16mb.com/Home.html
感謝ü..它的工作..但它的倒塌，我想這兩個圖像之間增加一些空間..ü能幫助我的空間太？ – Jyotishmoy
我會將寬度設置爲50％，以便它們相等並填充行，並使用填充在容器內創建偏移量。 – Marco