Html 如何正确地排列这条线

我对这部分代码有一个问题，由于某种原因，两个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>

本质上是电的
我们对世界的看法略有不同！



如果你曾经到过海外旅行，你可能已经知道，对于交流电的电压和频率没有一个世界性的标准。希望你没有找到困难的方法。由于种种原因
哇！酷！整洁的
创新+来自我们制造商的伟大想法！

---

jsiddle:

只需将

float:right

添加到第二个div

但是让我知道一件事。。这真是糟糕的做法

---

你可以在你的网站中加入引导式css，这样它就会有响应性，并且这种样式可以避免。有关引导JU的更多信息，请访问

，我将采用与Kaushik完全相反的答案！删除“显示：内联块；”从两个div（两次）添加Float:left到两个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; 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>

本质上是电的
我们对世界的看法略有不同！



如果你曾经到过海外旅行，你可能已经知道，对于交流电的电压和频率没有一个世界性的标准。希望你没有找到困难的方法。由于种种原因
哇！酷！整洁的
创新+来自我们制造商的伟大想法！

我查看了JSFIDLE，但我无法告诉您希望元素如何排列。哪两个元素应该并排出现？你应该考虑使用实际CSS而不是内嵌样式。这将使html更容易理解，并允许您检测冗余，例如在一个div上列出了两次

display:inline block

。好的，谢谢！谢谢你的帮助，谢谢！为了使我的编码更加高效，我必须朝着这样的方向努力。感谢您的帮助和建议。