简单的DIV浮动/堆栈问题（固定右侧，左侧灵活，媒体规则）

Question

我几乎在那里，但看起来有一个属性丢失或错误。

我想嵌入两个iFrame： - 左侧：YouTube视频（灵活的） - 右侧：youtube在线聊天（固定宽度为200px）

@media规则已经有效。但是对于桌面视图，第二个div（聊天）保持在第一个div（视频）之下，而它应该在同一行。这是我无法解决的问题。有人可以善待并告诉我将视频放在视频旁边的诀窍吗？

http://jsbin.com/waxaxa/1/edit?html,css,output

.wrapper {
 border : 2px dotted #ccc; padding: 2px; 
}

.wrapper div {
width: 100%; 
 min-height: 200px;
 padding: 10px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 float: left;
 overflow: hidden; 
}

#video { background-color: red; float:none; width:auto;}
#chat { background-color: gray;position: }

@media screen and (min-width: 600px) {
   .wrapper {
    height: auto;width: auto; overflow: hidden; // clearing 
   }
   #video {float:none; margin-right: 200px;}
   #chat { width: 200px; float: right; }
}

感谢您提供任何帮助。

Answer 1

更改代码如下：

＆＃13;

＆＃13;

.wrapper { 
	border : 2px dotted #ccc; padding: 2px; 
	width: 100%;
	overflow: auto;
}

.wrapper div {
  	width: 100%; 
   	min-height: 200px;
  	padding: 10px;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
}

#chat {
	background-color: gray;
 	width: 20%;
        float: right;
}

#video { 
	background-color: red;
	width: 80%;
	float: left;
}

@media screen and (max-width: 600px) {
   #chat,#video {
   	float: none;
   	width: 100%;

   }
}

＆＃13;

<div class="wrapper">
    <div id="video">video</div>
    <div id="chat">chat</div>
</div>

＆＃13;

＆＃13;

＆＃13;