0

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

我想要这个在画面的最左边。

<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>

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

谢谢！

4

3 回答 3

2

你可以像在这个 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.  -->
于 2013-06-21T00:18:10.340 回答
0

您应该记住，HTML 中的布局只是盒子。如果你能这样想，你就能取得任何成就。

所以你需要的第一件事是一个大盒子，这样你就可以轻松地在它周围移动小盒子。所以考虑到这一点，我创建了一个容器 div 并在其中放置了两个 div。每个都有宽度规格，因此使它们成为“列”。如果你尝试下面的代码，你会得到你想要的。

<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 替换而不是那些讨厌的东西！

于 2013-09-09T03:30:14.940 回答
0

在 CSS 中，您可以使用和<div>左右移动 s 。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>
于 2013-06-21T00:22:49.760 回答