Ich habe Code geschrieben, um ein Bild in einem Div-Tag und Text im Zusammenhang mit ihm unter dem Bild in verschiedenen div anzuzeigen. Aber ich habe jetzt 4 div Tags und 2 Bilder. aber ich möchte sie in der gleichen Reihe ausrichten. aber es wird unter den anderen Div-Tags wie folgt angezeigt. 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.Wie Inhalte von mehreren div Tags in einer Zeile angezeigt werden
aber jetzt möchte ich beide Bilder auf der gleichen Linie ausrichten. aber sie sind jetzt untereinander ausgerichtet .. kann mir bitte jemand helfen, wie man sie in der gleichen Linie anordnet. es eine große Hilfe sein würde .. hier ist der HTML-Code: -
<!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>
Hier ist die CSS-Codes .. 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;
}
Und menu.css: -
Hiernav 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;
}
ist die Website: http://www.brothersgaming.16mb.com/Home.html
u danken .. es hat funktioniert .. aber es ist zusammengebrochen, und ich will etwas Platz zwischen diesen beiden Bildern hinzufügen .. u würde mich mit dem Raum helfen zu ? – Jyotishmoy
Ich würde die Breiten zu 50% machen, so dass sie gleich sind und die Zeile füllen, und Padding verwenden, um einen Offset innerhalb des Containers zu erstellen. – Marco