Центрирование 3 разделов в справке CSS?

#html #css

#HTML #css

Вопрос:

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

Я пытаюсь использовать все три раздела; левое изображение, содержимое 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>

1. он не отображается должным образом для экрана ниже 1280×1024

2. Я думаю, вам нужна директива float там, и вам нужно установить для СОДЕРЖАЩЕГО div значение overflow: hidden, если только браузеру не разрешено скрывать материал, поскольку размер браузера уменьшается, он будет обернут.

3. Проблема в том, что все ваши элементы не помещаются на экран размером не более 1000 пикселей

4. Означает ли это, что мне нужно уменьшить два изображения, чтобы они соответствовали размеру разрешения экрана?

Ответ №1:

Чтобы сохранить их встроенными, вам нужно выразить ширину в процентах, чтобы они могли уменьшаться по мере уменьшения экрана. Если элементам нельзя разрешить изменять размер, вам нужно задать телу фиксированную ширину в пикселях для поддержания выравнивания.

Ответ №2:

Укажите ширину для каждого из ваших трех блоков

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

обратите внимание, что общая ширина содержимого должна быть равна или больше 900 пикселей, если все три имеют ширину 300 пикселей. В противном случае третий раздел не сможет разместиться в этих 900 пикселях и будет перенесен в следующее доступное место.