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