Question

这是我的代码，它最终会像这样 [[left 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%">
<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>

我该如何解决这个问题？！

Answer 1

首先，您应该在外部样式表中执行此结构而不是内联。关于这个问题，只有一个方框有float:left;，你需要三个方框。

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

Answer 2

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

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

Answer 3

删除您申请的所有Floats，

然后应用此CSS：

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

<强> FIDDLE DEMO

Answer 4

您的所有样式都应该在外部样式表中，但您尝试执行的操作的解决方案应如下所示：

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

如何使3个div水平对齐

4 个答案: