Question

我很确定你们大多数人都很容易，但是，我似乎无法正确地渲染我的代码。我有三个@ 330px宽的元素，我试图在1050px的内容区域内“并排”放置。只有一个元素在正确的“块”上呈现，其他两个元素出现在下面。我只是试图将三者在内容区域间均匀分布，并在它们之间留有足够的空间。由于一个元素（rss feed）只会在我的网站上呈现，请查看我的测试页面以进一步解释我在说什么：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的块元素。

内联块元素的位置和间距

1 个答案: