如何使这个排队正确

时间:2014-09-26 14:35:11

标签: 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>

JSFiddle:http://jsfiddle.net/zawmd0uw/

2 个答案:

答案 0 :(得分:1)

我对Kaushik采取完全相反的答案!删除&#39;显示:内联块;&#39;来自两个DIVS(两次)并添加Float:left to both。

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

答案 1 :(得分:0)

只需将float:right添加到您的第二个div ..

但是让我知道你一件事......这是非常糟糕的做法。

您可以将bootstrap css包含在您的网站中,以便它能够响应,并且可以避免这种样式。有关bootstrap jus的更多信息,请访问 HERE