Question

我的问题是我有一个对象标记框和一个iFrame，这是我想要代码做的一个例子

[boz] [box] [box]

但这就是我得到的。

[box]
[box]
[box]

CSS：

.stream {
   display: inline;
}

HTML：

<div class="stream">


        <object type="application/x-shockwave-flash"
          height="350"
          width="390" 
          id="live_embed_player_flash"
          data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=username"
          bgcolor="#000000">
          <param name="allowFullScreen" value="true" />
          <param name="allowScriptAccess" value="always" />
          <param name="allowNetworking" value="all" />
          <param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
          <param name="flashvars" value="hostname=www.twitch.tv&channel=username&auto_play=true&start_volume=25" />
        </object>

             <a href="http://www.twitch.tv/username" 
              style="padding:2px 0px 4px; 
              display:block; width:345px; 
              font-weight:normal; 
              font-size:10px;text-decoration:underline; 
              text-align:center;">Watch live video from username on www.twitch.tv
             </a>


        <iframe 
          frameborder="0" 
          scrolling="no" 
          id="chat_embed" 
          src="http://twitch.tv/chat/embed?channel=username&popout_chat=true" 
          height="350" 
          width="300">
        </iframe>
</div>

有解决方案的人吗？

Answer 1

我的评论并不完全清楚：）

 .stream a, 
.stream object,
.stream iframe{ 
  display: inline-block;
  vertical-align:middle;
}

http://codepen.io/gc-nomade/pen/LHwfj

如果您以display:block标记的内联方式删除<a>，则无效。

编辑：为了确保他们保持一行，你可以添加：

.stream {white-space:nowrap;} 
.stream * {white-space:normal;}

Answer 2

您获得不一致结果的原因是您已为内联display: block;元素定义a。
删除它，向所有子元素添加一个类，然后使用.class {display: inline-block}。

See a sample Jsfiddle

如何获得内联的两个不同的盒子

2 个答案: