如何使這條線正確

我遇到了這部分代碼的問題，出於某種原因，兩個div中包含的兩個元素將不能正確排列（並排）。我對此相對較新，希望得到一些幫助。這可能是我忽略的一個愚蠢的錯誤，但我似乎無法做到。如何使這條線正確

<div style="background-image:url('http://royalelectric.com/blog/wp-content/uploads/2014/09/Yellow-Banner-1.jpg'); background-size:100%;"> 

<div style="max-width:584px; min-width:205px; display:inline-block; width:48.8%; min-height:230px; display:inline-block; padding:1.2%;" align="left"> 
<h1 align="left">Essentially Electric</h1> 
<h3 align="left">A Slightly Different Outlook on Our World!</h3> 
<a href="http://royalelectric.com/blog/why-isnt-there-a-standard-voltage-among-the-worlds-nations/"><img src="http://royalelectric.com/blog/wp-content/uploads/2014/07/voltage-thumbnail.jpg" style="float:left"> 
<h4 style="text-align:center; padding-left:4%; padding-right:4%;"> Why isn’t there a standard voltage among the world’s nations? </h4></a> 
<br> 
<p style="text-align:right; padding-left:5%; padding-right:5%;"> 
If you’ve ever traveled overseas, you probably already know that there isn’t a worldwide standard for the voltage and frequency of alternating current (AC) electricity. Hopefully you didn’t find out the hard way. For various reasons...</p> 
<a href="http://royalelectric.com/blog/royal-blog/"><img src="http://royalelectric.com/blog/wp-content/uploads/2014/09/button11.png" style="padding:4%;"></a> 
</div> 

<div style="max-width:584px; min-width:205px; display:inline-block; width:48.5%; min-height:230px; display:inline-block; padding:1.2%;" align="left"> 
<h1 align="left">Wow! Cool! Neat!</h1> 
<h3 align="left">Innovations + Great Ideas from our Manufacturers!</h3> 
<a href="http://royalelectric.com/blog/why-isnt-there-a-standard-voltage-among-the-worlds-nations/"><img src="http://royalelectric.com/blog/wp-content/uploads/2014/09/Klein-Tools-Switch-Drive-System-T1.jpg" align="left" style="padding-left:5%; padding-right:5%;"></a> 
<a href="http://royalelectric.com/blog/why-isnt-there-a-standard-voltage-among-the-worlds-nations/"><img src="http://royalelectric.com/blog/wp-content/uploads/2014/09/Klein-Tools-Switch-Drive-System-T1.jpg" align="right" style="padding-left:5%; padding-right:5%;"></a> 
</div> 
</div>

的jsfiddle：http://jsfiddle.net/zawmd0uw/

來源

2014-09-26 bmbu924

我看着jsfiddle，但我不能告訴你要如何排列元素。哪兩個元素應該並排顯示？ – 2014-09-26 14:39:47

您應該考慮使用實際的css而不是內聯樣式。它將使html更容易理解，並允許您檢測冗餘，例如您在其中一個div上列出了兩次「display：inline-block」。 – Bic 2014-09-26 14:44:13

好的謝謝！感謝幫助。 – bmbu924 2014-09-26 14:56:10

只需添加float:right到你的第二格..

，但讓我知道你一兩件事。這是非常糟糕的做法。

你可以引導CSS到你的網站，這樣它會響應，這種樣式可以避免。欲瞭解更多有關引導強制訪問信息HERE

來源

2014-09-26 14:51:51

謝謝！致力於使我的編碼更有效率，並且越來越清楚我必須朝着這樣的方向前進。感謝幫助和建議。 – bmbu924 2014-09-26 14:59:44

隨時Buddy .. :) – 2014-09-26 15:10:28

我會採取與Kaushik完全相反的答案！刪除'display：inline-block;'來自兩個DIVS（兩次）並添加Float：向左。

<div style="background-image:url('http://royalelectric.com/blog/wp-content/uploads/2014/09/Yellow-Banner-1.jpg'); background-size:100%;"> 

<div style="max-width:584px; min-width:205px; width:48.8%; min-height:230px;padding:1.2%;float:left;" align="left"> 
<h1 align="left">Essentially Electric</h1> 
<h3 align="left">A Slightly Different Outlook on Our World!</h3> 
<a href="http://royalelectric.com/blog/why-isnt-there-a-standard-voltage-among-the-worlds-nations/"><img src="http://royalelectric.com/blog/wp-content/uploads/2014/07/voltage-thumbnail.jpg" style="float:left"> 
<h4 style="text-align:center; padding-left:4%; padding-right:4%;"> Why isn’t there a standard voltage among the world’s nations? </h4></a> 
<br> 
<p style="text-align:right; padding-left:5%; padding-right:5%;"> 
If you’ve ever traveled overseas, you probably already know that there isn’t a worldwide standard for the voltage and frequency of alternating current (AC) electricity. Hopefully you didn’t find out the hard way. For various reasons...</p> 
<a href="http://royalelectric.com/blog/royal-blog/"><img src="http://royalelectric.com/blog/wp-content/uploads/2014/09/button11.png" style="padding:4%;"></a> 
</div> 

<div style="max-width:584px; min-width:205px; width:48.5%; min-height:230px; padding:1.2%;;float:left;" alig="left"> 
<h1 align="left">Wow! Cool! Neat!</h1> 
<h3 align="left">Innovations + Great Ideas from our Manufacturers!</h3> 
<a href="http://royalelectric.com/blog/why-isnt-there-a-standard-voltage-among-the-worlds-nations/"><img src="http://royalelectric.com/blog/wp-content/uploads/2014/09/Klein-Tools-Switch-Drive-System-T1.jpg" align="left" style="padding-left:5%; padding-right:5%;"></a> 
<a href="http://royalelectric.com/blog/why-isnt-there-a-standard-voltage-among-the-worlds-nations/"><img src="http://royalelectric.com/blog/wp-content/uploads/2014/09/Klein-Tools-Switch-Drive-System-T1.jpg" align="right" style="padding-left:5%; padding-right:5%;"></a> 
</div> 
</div>

來源

2014-09-26 14:58:02 JeffUK

如何使這條線正確

回答

相關問題