Question

我试图达到下面说明的效果：

enter image description here

在我的网站上（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定义宽度的情况下获得我所拥有的内容。如果没有，我想我可以忍受地图调整大小。不过我试图这样做。

Answer 1

使用@media查询，类似这样

.rightcol { float: right; }
@media (max-width: 600px) {
   .rightcol { float: none; }
}

这将在屏幕尺寸为600px或更低.rightcol的所有设备上设置float: none，并为其余设置保留float: right。您当然可以将600px更改为您想要的任何数字。

Answer 2

JSFIDDLE

用于左侧块使用

float:left;
width:50%;

因为它当前宽度：100％自动，您需要将内容分开为50％50％

然后对于容器块，您必须通过

清除浮动

 display:inline-block;

Answer 3

只需将两个元素浮动到左侧即可。使用百分比宽度控制元素的宽度：类似于width: 50%;

简单示例：

有一个小提琴 - Fiddle Link!

更新 - 摆弄文字 - Fiddle Link!

HTML

<div id="text"></div>
<iframe></iframe>

CSS

#text {
    width: 50%;
    height: 200px;
    background: #CCC;
    float: left;
    min-width: 200px;
}
iframe {
    width: 200px;
    height: 200px;
    background: #333;
    border: none;
}

Answer 4

请不要询问答案，询问如何从当前代码中进行操作。

您要创建的是响应式布局。您可以在CSS中使用媒体查询来实现您的要求。用法示例：

@media (max-width: 990px) {
    .sidebar {
        float: left;
    }
}

为了达到预期的效果，有三种不同的方法：

您可以选择要走的路。但是，如果您发布了fiddle或某些代码，我们将能够帮助您更好一点。 ;）

Answer 5

好吧，你的内容区域div没有名字所以它继承了任何近似的divs样式，命名然后给它一个固定的并且向左浮动然后你会发现地图自动浮动

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

5 个答案: