如何使3周的div对齐horozontally

-1

这是我的代码，它结束了这样 [离开IMG] [IFRAME] [右IMG] 我需要在所有水平对齐的代码，以便它会穿过去这一页。这是一个学校项目。如何使3周的div对齐horozontally

<div class="container"> 
<div width="33%" style="float: left;"> 
<img src="powder1.jpg" width="250" height="250"/> 
</div> 

<div> 
<div width="23%"> 
<p> 
We are located right next to <strong style="color: #ff0000;">Pizanos Pizzeria</strong> 
<br/> on <strong style="color: #ff0000;">North Loop Road</strong> in Brian Head, Utah. 
</p> 
</div> 
<iframe width="33%" height="350" frameborder="0" scrolling="no" margin-height="0" 
margin-width="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp; 
geocode=&amp;q=briand+head+Ut&amp;aq=&amp;sll=39.235867,-94.42591&amp; 
sspn=0.16354,0.338173&amp;ie=UTF8&amp;hq=&amp;hnear=Brian+Head,+Iron+County,+Utah&amp; 
t=m&amp;ll=37.694433,-112.84652&amp;spn=0.002971,0.00456&amp;z=17&amp;output=embed"> 
</iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp; 
hl=en&amp;geocode=&amp;q=briand+head+Ut&amp;aq=&amp;sll=39.235867,-94.42591&amp; 
sspn=0.16354,0.338173&amp;ie=UTF8&amp;hq=&amp;hnear=Brian+Head,+Iron+County,+Utah&amp; 
t=m&amp;ll=37.694433,-112.84652&amp;spn=0.002971,0.00456&amp;z=17" style="color:#0000FF; 
text-align:left">View Larger Map</a></small> 
</div> 

<div width="33%" style="float: right;"> 
<img src="powder2.jpg" width="250" height="250"/> 
</div>

我该如何解决这个问题？

来源

2013-12-09 KStahljr

首先，你应该在外部样式表中做这个结构，而不是内联。关于这个问题，你的箱子中只有一个有float:left;，你需要这三个箱子。

正确的解决办法是：http://jsbin.com/ERiSeNI/2/edit

来源

2013-12-09 17:58:47 jaicab

您需要浮动贵中心的div以及（并设置iframe的宽度为100％），请参阅：http://jsfiddle.net/3LVjt/

<div style="float:left">...

来源

2013-12-09 17:59:01 user3075664

删除所有Floats你已申请，

然后应用此CSS：

.container { 
    white-space:nowrap; 
} 
.container div { 
    display:inline-block; 
}

FIDDLE DEMO

来源

2013-12-09 18:05:11

您所有的造型应该是在外部样式表，但对于你正在尝试做的应该是这样的解决方案：

<div class="container"> 
    <div style="float:left; width: 33%;"> 
     <img src="powder1.jpg" width="250" height="250" /> 
    </div> 
    <div style="float:left; width: 33%;"> 
     <p> 
      We are located right next to <strong style="color: #ff0000;">Pizanos Pizzeria</strong> 
      <br/> on <strong style="color: #ff0000;">North Loop Road</strong> in Brian Head, Utah. 
     </p> 
     <iframe height="350" frameborder="0" scrolling="no" margin-height="0" margin-width="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp; 
     geocode=&amp;q=briand+head+Ut&amp;aq=&amp;sll=39.235867,-94.42591&amp; 
     sspn=0.16354,0.338173&amp;ie=UTF8&amp;hq=&amp;hnear=Brian+Head,+Iron+County,+Utah&amp; 
     t=m&amp;ll=37.694433,-112.84652&amp;spn=0.002971,0.00456&amp;z=17&amp;output=embed"> 
     </iframe> 
     <br /> 
     <small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp; 
     hl=en&amp;geocode=&amp;q=briand+head+Ut&amp;aq=&amp;sll=39.235867,-94.42591&amp; 
     sspn=0.16354,0.338173&amp;ie=UTF8&amp;hq=&amp;hnear=Brian+Head,+Iron+County,+Utah&amp; 
     t=m&amp;ll=37.694433,-112.84652&amp;spn=0.002971,0.00456&amp;z=17" style="color:#0000FF; 
     text-align:left">View Larger Map</a> 
     </small> 
    </div> 
    <div style="float:left; width: 33%;"> 
     <img src="powder2.jpg" width="250" height="250"/> 
    </div> 
</div>

来源

2013-12-09 18:08:15

如何使3周的div对齐horozontally

回答

相关问题