如何在同一行显示多个div标签的内容

时间：2016-08-02 16:57:27

标签： html css

我编写的代码用于在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.

但现在我想将两个图像对齐在同一条线上。但他们现在一个在另一个下方对齐..任何人都可以帮我如何安排他们在同一行。这会有很大的帮助.. 这是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> &nbsp;
<a href="#"><img src="images/images.jpg" width="60" height="60" alt="Google+" title="Google+"/></a> &nbsp;
<a href="#"><img src="images/download.jpg" width="64" height="60" alt="Twitter" title="Twitter"/></a> &nbsp;
</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/>
&copy; 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

2 个答案:

答案 0 :(得分：0)

您应该使用包含图像和文本的容器div，并使用css float属性。 还要记住，您应该为多次使用的对象使用类，并且对于只出现一次的对象使用id。

HTML 

<div class="container">
<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>
<div class="container">
<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>
</div>

CSS 

#polaroid{
width:100%;
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:100%;
line-height:32px;
}
.container{
width:45%;
  float:left;
}

CSS float Property Documentation

答案 1 :(得分：0)

更新 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> &nbsp;
          <a href="#"><img src="images/images.jpg" width="60" height="60" alt="Google+" title="Google+" /></a> &nbsp;
          <a href="#"><img src="images/download.jpg" width="64" height="60" alt="Twitter" title="Twitter" /></a> &nbsp;
        </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>
      <section id="polaroid-wrap">
        <div id="polaroid" align="center">
          <a href="#" style="
    "><img src="images/IMG-20160802-WA0012.jpg" alt="Base Layouts" title="Base Layouts" kasperskylab_antibanner="on"></a>
          <div id="text" align="center">
            <center><font size="+2" color="#F7F4F4"><a href="#">Browse Base Layouts</a></font></center>
          </div>
        </div>

        <div id="polaroid" align="center">
          <a href="#"><img src="images/IMG-20160802-WA0014.jpg" alt="War Strategy" title="Easy War Matchmaking Strategy" kasperskylab_antibanner="on"></a>
          <div id="text" align="center">
            <center><font size="+2" color="#F7F4F4"><a href="#">Easy War Matchmaking Strategy</a></font></center>
          </div>
        </div>

      </section>
      <div id="footer1">
      </div>
      <div id="footer2">
        <center>
          <font color="#F7F4F4" size="+1">Made With Love For All Clashers <br/>
&copy; Brothers Gaming 2016</font>
        </center>
      </div>
    </div>
  </body>

</html>

在您的css文件末尾添加此CSS代码 

#text {
  width: 100% !important;
}

div#polaroid:nth-child(odd) {
  float: left;
}

div#polaroid:nth-child(even) {
  float: right;
}
相关问题
最新问题