Question

我正在制作一个学校项目的模拟网站，我有一个问题，我的div元素错位并出现在另一个div中。

这是目前的样子 [http://i.imgur.com/A6zKQoA.jpg]

这就是我想要的样子（用photoshop制作）[http://i.imgur.com/Gv2yOgJ.jpg]

HTML

<div id="wrapper">
 <font color="BB9B5D"><h3><strong>LATEST NEWS</strong></h3></font>
 <hr color= "bb9b5d" />

  <div id= "LN1">
   <img src="Images/Fillerino.jpg" name="lni1" id="lni1" align= "left">
   <h4>Update 1.1.0</h4>
   <p>The first update of this year is here! Download it now and play with your friends, and be the first to take down the new bosses. </p>
  </div>

  <div id= "Ln2">
   <img src="Images/Fillerino.jpg" name="lni2" id="lni2" align= "left">
   <h4>Patch Notes 1.1.0</h4>
    <p> Read up on the Official Patch Notes to find out what you're up against.</p>
  </div>

</div>

 <div id= "NR">
  <font color="BB9B5D"><h3><b>RELEASES</b></h3></font>
  <hr color= "bb9b5d" />
 </div>

</body>
</html>

NR是右翼的另一个元素，但它按预期工作

CSS

#wrapper {
 margin-top: 20px;
 margin-left: 20px;
 margin-bottom: 20px;
 background-color: #202020;
 padding-left: 30px;
 padding-top: 1px;
 padding-bottom: 600px;
 padding-right: 30px;
 font-family: Roboto-Light;
 min-width: 55%;
 max-width: 55%;
 float: left;
}
#NR {
 margin-right: 20px;
 margin-top: 20px;
 background-color: #202020;
 padding-left: 30px;
 padding-top: 1px;
 padding-right: 30px;
 padding-bottom: 300px;
 font-family: Roboto-Light;
 min-width: 32%;
 float:right;
}
#LN1 {
 font-family: Roboto-Light;
}
#lni1 {
 width: 20%;
 height: 20%;
 margin-right: 10px;
}
#LN1 {
}
#lni2 {
 width: 20%;
 height: 20%;
 margin-right: 10px;
 margin-left: 10px;
}

我已尝试为ln1和ln2添加边距和填充，Id也不会更改使用位置绝对值，因为我想在类似格式下添加更多div。

任何帮助都将受到高度赞赏，谢谢！

Answer 1

由于您将图像对齐到左侧，因此您需要定义明确的浮动。

#LN1, #Ln2 {
      clear: both;
    }

＆＃13;

#wrapper {
 margin-top: 20px;
 margin-left: 20px;
 margin-bottom: 20px;
 background-color: #202020;
 padding-left: 30px;
 padding-top: 1px;
 padding-bottom: 600px;
 padding-right: 30px;
 font-family: Roboto-Light;
 min-width: 55%;
 max-width: 55%;
 float: left;
}
#NR {
 margin-right: 20px;
 margin-top: 20px;
 background-color: #202020;
 padding-left: 30px;
 padding-top: 1px;
 padding-right: 30px;
 padding-bottom: 300px;
 font-family: Roboto-Light;
 min-width: 32%;
 float:right;
}
#LN1 {
 font-family: Roboto-Light;
}
#lni1 {
 width: 20%;
 height: 20%;
 margin-right: 10px;
}
#LN1, #Ln2 {
  clear: both;
}
#lni2 {
 width: 20%;
 height: 20%;
 margin-right: 10px;
 margin-left: 10px;
}

＆＃13;

<div id="wrapper">
 <font color="BB9B5D"><h3><strong>LATEST NEWS</strong></h3></font>
 <hr color= "bb9b5d" />

  <div id= "LN1">
   <img src="Images/Fillerino.jpg" name="lni1" id="lni1" align= "left" />
   <h4>Update 1.1.0</h4>
   <p>The first update of this year is here! Download it now and play with your friends, and be the first to take down the new bosses. </p>
  </div>

  <div id= "Ln2">
   <img src="Images/Fillerino.jpg" name="lni2" id="lni2" align= "left" />
   <h4>Patch Notes 1.1.0</h4>
    <p> Read up on the Official Patch Notes to find out what you're up against.</p>
  </div>

</div>

 <div id= "NR">
  <font color="BB9B5D"><h3><b>RELEASES</b></h3></font>
  <hr color= "bb9b5d" />
 </div>

</body>
</html>

＆＃13;

Answer 2

您可以像这样添加css html

<div id="wrapper">
 <font color="BB9B5D"><h3><strong>LATEST NEWS</strong></h3></font>
 <hr color= "bb9b5d" />

  <div id= "LN1" class="test">
   <img src="Images/Fillerino.jpg" name="lni1" id="lni1" align= "left">
   <h4>Update 1.1.0</h4>
   <p>The first update of this year is here! Download it now and play with your friends, and be the first to take down the new bosses. </p>
  </div>

  <div id= "Ln2" class="test">
   <img src="Images/Fillerino.jpg" name="lni2" id="lni2" align= "left">
   <h4>Patch Notes 1.1.0</h4>
    <p> Read up on the Official Patch Notes to find out what you're up against.</p>
  </div>

</div>

 <div id= "NR">
  <font color="BB9B5D"><h3><b>RELEASES</b></h3></font>
  <hr color= "bb9b5d" />
 </div>

</body>
</html>

<强> CSS：

.test{display: inline-block; width: 100%;}

Answer 3

以下代码可以解决您的问题。替换图像

<!DOCTYPE html>
 <head>
    <style>
    p{
        color:white;
    }
    #wrapper {
     margin-top: 20px;
     margin-left: 20px;
     margin-bottom: 20px;
     background-color: #202020;
     padding-left: 30px;
     padding-top: 1px;
     padding-bottom: 600px;
     padding-right: 30px;
     font-family: Roboto-Light;
     min-width: 55%;
     max-width: 55%;
     float: left;
    }
    #NR {
     margin-right: 20px;
     margin-top: 20px;
     background-color: #202020;
     padding-left: 30px;
     padding-top: 1px;
     padding-right: 30px;
     padding-bottom: 300px;
     font-family: Roboto-Light;
     min-width: 32%;
     float:right;
    }
    #LN1 {
     font-family: Roboto-Light;
    }
    #lni1 {
     width: 20%;
     height: 20%;
     margin-right: 10px;
    }
    #LN1 {
        float:left;
    }
    #lni2 {
     width: 20%;
     height: 20%;
     margin-right: 10px;
    }
    h4{
        color:white;
    }
    #Ln2{
        float:left;
    }
    </style>
</head>
<body>
    <div id="wrapper">
     <font color="BB9B5D"><h3><strong>LATEST NEWS</strong></h3></font>
     <hr color= "bb9b5d" />

      <div id= "LN1">
       <img src="yellowbg.jpg" name="lni1" id="lni1" align="left">
       <h4 >Update 1.1.0</h4>
       <p>The first update of this year is here! Download it now and play with your friends, and be the first to take down the new bosses. </p>
      </div>

      <div id= "Ln2">
       <img src="yellowbg.jpg" name="lni2" id="lni2" align="left">
       <h4>Patch Notes 1.1.0</h4>
        <p> Read up on the Official Patch Notes to find out what you're up against.</p>
      </div>

    </div>

     <div id= "NR">
      <font color="BB9B5D"><h3><b>RELEASES</b></h3></font>
      <hr color= "bb9b5d" />
     </div>

    </body>
    </html>
</body>

Div看起来不对齐，在另一个div内

3 个答案: