Html 在右侧浮动 div，然后在窄屏幕上下拉
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22494931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Float div on right, then drop below on narrow screen
提问by mightimaus
I'm trying to achieve the effect illustrated below:
我正在尝试实现下图所示的效果：
on my site (http://new.freshsourdoughexpress.com/contact/), but I can't think of the correct HTML and CSS to get it to work. The only way I can get the map to float up on the right is to put the iframe before the text div, but then I can't have the map drop below the text when I shrink the width. I'm out of ideas currently so I'm hoping someone else can point out the obvious. Thanks!
在我的网站 ( http://new.freshsourdoughexpress.com/contact/) 上，但我想不出正确的 HTML 和 CSS 来让它工作。我可以让地图在右侧浮动的唯一方法是将 iframe 放在文本 div 之前，但是当我缩小宽度时，我无法让地图下降到文本下方。我目前没有想法，所以我希望其他人可以指出显而易见的问题。谢谢！
EDIT -Sorry, I posted this as I was running out the door and didn't post enough info. I currently do have a responsive layout (WP Twenty Thirteen theme). If I set the text div to float: leftand the map iframe to float: rightthe text div occupies 100% of the width and the map drops below. I'm trying not to set a width on the text div because I want it to be able to resize with the window. (I'm trying to keep the dimensions of the map the same and have the text resize to fit. Using a percentage width on the text would require me to do the same with the map, which I'm trying not to do.)
编辑 -抱歉，我在出门时发布了此信息，但没有发布足够的信息。我目前确实有一个响应式布局（WP 二十三个主题）。如果我将文本 div 设置为float: left并且将 iframe 设置float: right为文本 div 将占据 100% 的宽度，并且地图会下降到下方。我试图不在文本 div 上设置宽度，因为我希望它能够随窗口调整大小。（我试图保持地图的尺寸不变，并调整文本大小以适应。在文本上使用百分比宽度需要我对地图做同样的事情，我试图不这样做。）
If I put the iframe first in my HTML then the map will stay up at the top (the first three frames of the GIF) without setting a width (either in px or %), but then I can't have the map drop below the text. To achieve the last frame I had to move the iframe back below the text.
如果我将 iframe 首先放在我的 HTML 中，那么地图将保持在顶部（GIF 的前三帧）而不设置宽度（以 px 或 % 为单位），但是我不能让地图下降到下方文本。为了实现最后一帧，我必须将 iframe 移回文本下方。
So I'm wondering if it's at all possible to get what I'm after without defining a width for the text div. If there isn't I suppose I can live with the map resizing. I was trying to do it without it though.
所以我想知道是否有可能在不为文本 div 定义宽度的情况下获得我想要的东西。如果没有，我想我可以忍受地图大小的调整。不过，我试图在没有它的情况下做到这一点。
采纳答案by Mehmet Eren Yener
回答by Aister
use @media queries, something like this
使用@media 查询，像这样
.rightcol { float: right; }
@media (max-width: 600px) {
.rightcol { float: none; }
}
this will set the .rightcolon all devices with screen size 600px or lower float: noneand keep it float: rightfor the rest. You can of course change the 600px to whatever number you please.
这将.rightcol在屏幕尺寸为 600px 或更低的所有设备上设置 ，float: none并保留它float: right以用于其余部分。您当然可以将 600px 更改为您喜欢的任何数字。
回答by Bruno Toffolo
Please don't ask for the answer, ask how to do it from your current code.
请不要寻求答案，而是从您当前的代码中询问如何做到这一点。
What you're trying to create is a responsive layout. You can achieve what you asked for by using media queriesin your CSS. Example of usage:
您要创建的是响应式布局。您可以通过在 CSS 中使用媒体查询来实现您的要求。用法示例：
@media (max-width: 990px) {
.sidebar {
float: left;
}
}
To achieve the desired result there are three different ways to go:
要达到预期的结果，可以采用三种不同的方法：
- Create your layout from scratch
- Use a grid system
- Use a web tool
- 从头开始创建布局
- 使用网格系统
- 使用网络工具
You can choose which way to go. But if you had posted a fiddleor some piece of code, we would be able to help you a little bit better. ;)
你可以选择走哪条路。但是，如果您发布了小提琴或一些代码，我们将能够更好地帮助您。;)
回答by Ahmedskaya
Well, your content area div doesn't have a name so it inherets any near divs style, name it then give it a fixed with and float left then you will find the map floated automaitcally right
好吧，您的内容区域 div 没有名称，因此它继承了任何接近 div 的样式，命名然后将其固定并向左浮动，然后您会发现地图自动向右浮动
回答by misterManSam
Simply float both elements to the left. Control the width of elements with percentage widths: something like width: 50%;
只需将两个元素都向左浮动。用百分比宽度控制元素的宽度：类似width: 50%;
Simple example:
简单的例子：
Have a fiddle - Fiddle Link!
有一个小提琴 -小提琴链接！
Update- Fiddle with text - Fiddle Link!
更新- 摆弄文字 -小提琴链接！
HTML
HTML
<div id="text"></div>
<iframe></iframe>
CSS
CSS
#text {
width: 50%;
height: 200px;
background: #CCC;
float: left;
min-width: 200px;
}
iframe {
width: 200px;
height: 200px;
background: #333;
border: none;
}
