Question

http://www.magnixsolutions.com/dev/magicmorgan/indexnew.html

我试图拥有所有三个DIV;左图像，中间的Flash内容，右图像保持居中。当我将浏览器的尺寸拖得更小时，右图像的div会突破到底部。它们应该与我最小化的浏览器大小水平内联在一起。

中间的闪光灯是否与顶部对齐？我无法理解我做错了什么。

继承我所做的代码（我不允许在这个网站上显示img标签）

CSS：

    body{width:100%; margin: 0 auto 0 auto;}
    #content{text-align:center; }
    .content-left{width:362px; display: inline-block;}
    .content-center{width:950px; display: inline-block;}
    .content-right{width:427px; display: inline-block;}

HTML：

<div id="content">
    <div class="content-left">LEFT IMAGE HERE</div>
    <div class="content-center">
     <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="950" height="1000" id="index" align="middle">
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="movie" value="index.swf" />
            <param name="menu" value="false" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#000000" />
            <embed src="index.swf" menu="false" quality="high" bgcolor="#000000" width="950" height="1000" name="index" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
        </object>
    </div>
    <div class="content-right">RIGHT IMAGE HERE</div>
</div>

Answer 1

为了使它们保持内联，您需要以百分比表示宽度，以便随着屏幕变小它们可以变小。如果不允许元素重新调整大小，则需要为主体提供固定宽度（以像素为单位）以保持对齐。

Answer 2

指定三个块中的每一个的宽度

width:300px // this should be added for each of the three div

请注意，如果所有三个宽度均为300px，则内容的总宽度必须等于或大于900px。否则，第三个div不能容纳在900px中，并且将被下移到下一个可用位置。

在CSS中居中3个DIV有帮助吗？

2 个答案: