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

【问题标题】：Centering 3 DIVs in CSS help?在 CSS 中居中 3 个 DIV 有帮助吗？
【发布时间】：2011-12-27 10:30:39
【问题描述】：

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

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

中间的flash也不对齐顶部？我无法理解我做错了什么。

这是我做的代码（我不允许在这个网站上显示 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>

【问题讨论】：

1280x1024 以下的屏幕无法正确渲染
我认为您需要在其中使用 float 指令，并且您需要将 CONTAINING div 设置为溢出：隐藏除非允许浏览器在浏览器尺寸缩小时隐藏内容，否则它将被包装。
问题是你的所有元素都不适合最大 1000px 的屏幕
这是否意味着我需要将两个图像缩小以适应屏幕的分辨率大小？

标签： html css

【解决方案1】：

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

【讨论】：

我找到了解决方案！它的空白：nowrap；当浏览器越来越小时，这样做的伎俩和正确的 div 没有破坏。

【解决方案2】：

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

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

请注意，如果所有三个都是 300 像素宽，则内容的总宽度必须等于或大于 900 像素。否则第三个 div 无法容纳在该 900px 中，将向下移动到下一个可用位置。

【讨论】：