Question

我想把这两个对象放在一起。这是我目前对我的身体所具有的。

我想在这个方向的最左侧。

<h2><font color="#0101DF"><font face="Verdana">The Lastest Videos</font></h2>
<div class="fadein">
<img src="minecraft zombie.png">
<img src="Minecraft Clipart Edited.png">
<img src="Thumbnail.png">
</div>

我希望这个位于最右侧。

<div style="text-align: right;">
<h2><font color="#0101DF"><font face="Verdana">Top 10 Free To Play Games</font></h2>
<h4><font color="#9933CC"><font face="Verdana">#1 PlanetSide 2</font></h2>
<h4><font color="#9933CC"><font face="Verdana">#1 PlanetSide 2</font></h2>
<h4><font color="#9933CC"><font face="Verdana">#1 PlanetSide 2</font></h2>
</div>

但我希望两个对象彼此相邻。我知道它有点令人困惑，抱歉我不知道如何解释它。

谢谢！

Answer 1

你可以像this Fiddle一样浮动它们。

<div style="float: left; ">
<!-- stuff on the left -->
</div>

<div style="float: right;">
<!-- stuff on the right -->
</div>

<!-- Just make sure you clear the floats.  -->

Answer 2

在CSS中，您可以使用<div>和float: left;左右移动float: right;。

如果您的问题是<h2>和<h4>出现在单独的行中，则可以使用dispaly: inline-block强行将它们放在同一行。

所以尝试像

这样的东西

<div style="float: left;">
  <h2><font color="#0101DF"><font face="Verdana">The Lastest Videos</font></h2>
  <div class="fadein">
    <img src="minecraft zombie.png">
    <img src="Minecraft Clipart Edited.png">
    <img src="Thumbnail.png">
  </div>
</div>
<div style="float: right;">
  <h2 style="display:inline-block;"><font color="#0101DF"><font face="Verdana">Top 10 Free To Play Games</font></h2>
  <h4 style="display:inline-block;"><font color="#9933CC"><font face="Verdana">#1 PlanetSide 2</font></h2>
  <h4 style="display:inline-block;"><font color="#9933CC"><font face="Verdana">#1 PlanetSide 2</font></h2>
  <h4 style="display:inline-block;"><font color="#9933CC"><font face="Verdana">#1 PlanetSide 2</font></h2>
</div>

Answer 3

您应该记住，HTML中的布局只是框。如果你能这样想，你就可以做到。

所以你需要的第一件事就是一个大盒子，这样你就可以轻松地移动LITTLE盒子。因此，考虑到这一点，我创建了一个容器div并在其中放入两个div。每个都有宽度规格，从而使它们成为列＃39;如果您尝试下面的代码，您将得到您要求的内容。

<div class="container">
<div id="left" style="width: 49%; float: left; display: block;">
<!-- left -->
<h2 style="color: #0101DF; font-family: Verdana">The Lastest Videos</h2>
<img src="minecraft zombie.png">
<img src="Minecraft Clipart Edited.png">
<img src="Thumbnail.png">
</div>

<div id="right" style="width: 49%; float: right; display: block;">
<!-- right -->
<h2 style="color: #0101DF; font-family: Verdana">Top 10 Free To Play Games</h2>
<h4 style="color: #9933CC; font-family: Verdana">#1 PlanetSide 2</h4>
<h4 style="color: #9933CC; font-family: Verdana">#1 PlanetSide 2</h4>
<h4 style="color: #9933CC; font-family: Verdana">#1 PlanetSide 2</h4>
</div>

<!-- end container -->
</div>

如果这不是你所追求的，你可以扩展这个问题，或者提供你想要实现的截图/照片图片吗？

无论如何，HTML非常简单！查看一些CSS并且你会很甜蜜（我已经将你的代码转换为CSS替换而不是讨厌的东西！

无法将对象置于HTML中心

3 个答案: