Css 如何使3个div水平对齐
这是我的代码，结果是这样的 [[左img][iframe] [右img]] 我需要将所有代码水平对齐，这样它就可以在整个页面上运行。这是一个学校项目Css 如何使3个div水平对齐,css,html,Css,Html,这是我的代码，结果是这样的 [[左img][iframe] [右img]] 我需要将所有代码水平对齐，这样它就可以在整个页面上运行。这是一个学校项目 <div class="container"> <div width="33%" style="float: left;"> <img src="powder1.jpg" width="250" height="250"/> </div> <div> <div width="23%
<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&source=s_q&hl=en&
geocode=&q=briand+head+Ut&aq=&sll=39.235867,-94.42591&
sspn=0.16354,0.338173&ie=UTF8&hq=&hnear=Brian+Head,+Iron+County,+Utah&
t=m&ll=37.694433,-112.84652&spn=0.002971,0.00456&z=17&output=embed">
</iframe><br /><small><a href="https://maps.google.com/maps?f=q&source=embed&
hl=en&geocode=&q=briand+head+Ut&aq=&sll=39.235867,-94.42591&
sspn=0.16354,0.338173&ie=UTF8&hq=&hnear=Brian+Head,+Iron+County,+Utah&
t=m&ll=37.694433,-112.84652&spn=0.002971,0.00456&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>
我们就在比萨诺斯比萨店旁边
在犹他州布莱恩黑德的北环路上。
我怎么才能解决这个问题 首先，您应该在外部样式表中执行此结构，而不是内联。关于这个问题，只有一个框有
float:left，您需要在其中三个上使用它
正确的解决方案是：您还需要浮动中心div（并将iframe width设置为100%），请参见：
。。。
删除所有已应用的浮动
然后应用以下CSS：
.container {
white-space:nowrap;
}
.container div {
display:inline-block;
}
您的所有样式都应该在外部样式表中，但是您尝试执行的解决方案应该如下所示：
<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&source=s_q&hl=en&
geocode=&q=briand+head+Ut&aq=&sll=39.235867,-94.42591&
sspn=0.16354,0.338173&ie=UTF8&hq=&hnear=Brian+Head,+Iron+County,+Utah&
t=m&ll=37.694433,-112.84652&spn=0.002971,0.00456&z=17&output=embed">
</iframe>
<br />
<small><a href="https://maps.google.com/maps?f=q&source=embed&
hl=en&geocode=&q=briand+head+Ut&aq=&sll=39.235867,-94.42591&
sspn=0.16354,0.338173&ie=UTF8&hq=&hnear=Brian+Head,+Iron+County,+Utah&
t=m&ll=37.694433,-112.84652&spn=0.002971,0.00456&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>
我们就在比萨诺斯比萨店旁边
在犹他州布莱恩黑德的北环路上。
<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&source=s_q&hl=en&
geocode=&q=briand+head+Ut&aq=&sll=39.235867,-94.42591&
sspn=0.16354,0.338173&ie=UTF8&hq=&hnear=Brian+Head,+Iron+County,+Utah&
t=m&ll=37.694433,-112.84652&spn=0.002971,0.00456&z=17&output=embed">
</iframe>
<br />
<small><a href="https://maps.google.com/maps?f=q&source=embed&
hl=en&geocode=&q=briand+head+Ut&aq=&sll=39.235867,-94.42591&
sspn=0.16354,0.338173&ie=UTF8&hq=&hnear=Brian+Head,+Iron+County,+Utah&
t=m&ll=37.694433,-112.84652&spn=0.002971,0.00456&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>