html - 行内 block 元素的位置和间距

Question

我相信对于你们中的大多数人来说这很容易，但是，我似乎无法让我的代码正确呈现。我有三个元素 @ 330px 宽，我试图将它们“并排”放置在 1050px 的内容区域内。只有一个元素在正确的“ block ”上呈现，另外两个出现在下方。我只是想把这三个放在一起，均匀分布在内容区域中，并在它们之间留出足够的空间。由于一个元素(rss 提要)只会在我的网站上呈现，请查看我的测试页面以进一步解释我在说什么:http://www.realtimehockey.net/testing.html

提前感谢您提供的任何帮助。

我的代码

CSS

.box {
display: inline-block;
float: left;
}

HTML

<div class="box">

<div class="feedgrabbr_widget" id="fgid_882d7000d9e4e2c5832cdb9c6"     
float="right"></div>
<script> if (typeof(fg_widgets)==="undefined") fg_widgets = new     
Array();fg_widgets.push("fgid_882d7000d9e4e2c5832cdb9c6");</script>
<script src="http://www.feedgrabbr.com/widget/fgwidget.js"></script>

<iframe 
src="https://scorestream.com/widgets/iframe?widgetId=16476"
style="padding:0px;border:0px;width:330px;height:600px;max-height:600px;
display:inline-block"
title="Realtime sports scoreboard widget"
scrolling="no" frameBorder="0">
</iframe>

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F 
%2Fwww.facebook.com%2Frealtimehockey&amp;width=330&amp;height=600&
amp;colorscheme=dark&amp;show_faces=false&amp;header=false&
amp;stream=true&amp;show_border=true" scrolling="no" frameborder="0" 
style="border:none; overflow:hidden; display:inline-block; width:330px;
height:600px;" allowTransparency="true"></iframe>


</div>

Answer 1

将此添加到您的 CSS

.feedgrabbr_widget {
    width: 330px;
    display: inline-block;
}

这应该更正第一个框的宽度和显示，该框实际呈现为来自 chrome 检查器的宽度为 663px 的 block 元素。