如何使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

回答

相關問題