不能以HTML格式居中對象

我想將這兩個對象放在一起。這是我目前對我的身體所具有的。不能以HTML格式居中對象

我想要在這個場景的最左邊。

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

我想要這個在最右邊的sceen。

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

但我希望兩個對象彼此相鄰。我知道它有點混亂，對不起，我不知道如何解釋得很好。

謝謝！

來源

2013-06-21 user2426533

分別使用'float：left'和'float：right'。此外，你應該停止使用'font'標籤 – Gary

你在說什麼字體標籤 – user2426533

所有這些'font'標記都是不好的做法，有幾個原因，最明顯的是它已經在HTML4中被棄用，並且在HTML5中不被支持，你最好找到一個合適的標籤（可能是'span'），並通過CSS設置字體/顏色。 – Gary

你可以漂浮他們，如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. -->

來源

2013-06-21 00:18:10 Larsenal

我試過了，但是他們仍然在彼此之下，我需要他們緊挨着。 – user2426533

我的共享小提琴的行爲不像預期的那樣嗎？你的寬度是多少？瀏覽器？如果他們不合適，那麼他們會落在另一個之下。你可以給他們兩個固定的寬度，看看是否有幫助。 – Larsenal

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

來源

2013-06-21 00:22:49 Sklivvz

你應該記住，在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>

如果這不是你是什麼後，你能對這個問題展開或可能提供關於你想達到什麼樣的一個屏幕截圖/ Photoshop處理圖像？

無論如何，HTML是超級簡單！ Chuck在一些CSS中，你會變得很甜（我已經將你的代碼轉換成了CSS替代品，而不是那些討厭的東西！）

來源

2013-09-09 03:30:14 Steve

不能以HTML格式居中對象

回答

相關問題