向右浮动div,然后在窄屏幕上下方

mig*_*aus 15 html css

我想要达到下面说明的效果:

在此输入图像描述

在我的网站上(http://new.freshsourdoughexpress.com/contact/),但我想不出正确的HTML和CSS让它工作.我可以让地图向右浮动的唯一方法是将iframe放在文本div之前,但是当我缩小宽度时,我无法将地图放在文本下方.我目前没有想法,所以我希望其他人可以指出明显的想法.谢谢!

编辑 -对不起,我发布这个,因为我跑出门,并没有发布足够的信息.我目前确实有一个响应式布局(WP Twenty Thirteen主题).如果我将文本div设置为,float: left并且地图iframe float: right占用文本div占据宽度的100%并且地图下降到下方.我试图不在文本div上设置宽度,因为我希望它能够使用窗口调整大小.(我试图保持地图的尺寸​​相同,并使文本调整大小以适应.在文本上使用百分比宽度将要求我对地图执行相同的操作,我不想这样做.)

如果我将iframe放在我的HTML中,那么地图将保持在顶部(GIF的前三帧)而不设置宽度(在px或%中),但是我不能在下面放置地图文本.为了实现最后一帧,我必须将iframe移回文本下方.

所以我想知道在没有为文本div定义宽度的情况下,是否有可能得到我所追求的东西.如果没有,我想我可以忍受地图调整大小.我试图在没有它的情况下这样做.

Meh*_*ner 1

JSFIDDLE

供左块使用

float:left;
width:50%;
Run Code Online (Sandbox Code Playgroud)

因为目前自动宽度为100%,所以需要将内容分隔为50% 50%

那么对于容器块,您必须通过以下方式清除浮动

 display:inline-block;
Run Code Online (Sandbox Code Playgroud)