HTML и CSS: div полной ширины (полное разрешение) внутри div фиксированной ширины

http://i.stack.imgur.com/FZyiq.jpg Я разработал этот макет, и он отлично работает, но когда я пытаюсь сделать это с помощью CSS, все становится немного странным.

У меня есть div шириной 960 пикселей, и этот div является основной оболочкой содержимого. Я хочу, чтобы этот div галереи игнорировал ширину и имел 100% разрешения браузера (или другой ширины). есть идеи как это сделать?

<div id="conteudo" > 
    <div class="exploded-wrapper" id="your_post_here_<?php the_ID(); ?>">
        <div class="exploded" id="your_post_here_<?php the_ID(); ?>">
            <a href="javascript:jQuery('.exploded-wrapper').hide();jQuery('.exploded').hide();" class="close"></a>
            <div class="detalhes">
                <div class="desc_wrapper">
                    <div class="desc">
                        <h2>
                            <?php the_title(); ?>
                        </h2>
                        <?php echo the_excerpt(); ?>
                        <div class="desc_pag">
                   <!--a href="#">1</a>
                            <a href="#">2</a>
                            <a href="#">3</a-->
                        </div>
                    </div>
                </div>                    
                <div class="galeria">
                    <?php the_content('Read the rest of this entry &raquo;'); ?>
            <script type="text/javascript">
    jQuery(document).ready(function() {

        // Using default configuration
        //$("#galeria").carouFredSel();

        // Using custom configuration
        jQuery("#galeria").carouFredSel({
            //items             : 2,
            circular            : true,
            direction           : "left",
            infinite            : true,
            scroll : {
                items           : 1,
                easing          : "swing",                          
                pauseOnHover    : true,
                mousewheel      : true
            }                   
        }); 
    });

    </script>
                </div>
            </div>
        </div>
    </div>
    </div>

для CSS используйте firebug и проверьте http://ccrdesign.com/portifolio/


html css fixed-width width
person Thiago Correia Carneiro    schedule 30.01.2012    source источник
comment
Использовать положение: абсолютное; чтобы убрать его из потока документов, ширина 100% должна составлять полную ширину окна браузера.   -  person Kyle    schedule 30.01.2012
comment
Быстро просмотрел, и хотя я не нашел решения навскидку, я заметил, что вы повторно используете идентификаторы элементов. ID должен быть уникальным; вместо этого вы должны переключить повторно используемые из них на классы и соответствующим образом настроить любые сценарии.   -  person Greg Pettit    schedule 30.01.2012
comment
@KyleSevenoaks О чем вы говорите? Кроме того, ширина 100% сделает его таким же широким, как его родитель, а не окно браузера (если только родитель не является таким же широким или документ ЯВЛЯЕТСЯ родителем). Я бы посмотрел на предоставленную ссылку, посмотрел, сможете ли вы заставить ее работать, и предоставил бы ее как фактический ответ, а не комментарий ... получите несколько голосов и принятый ответ, если вы решите это!   -  person Greg Pettit    schedule 30.01.2012
comment
@ Грег, я просто сделал несколько предложений. Я знаю, как работает SO: D, может быть, я посмотрю поближе... :) Thiago: Ссылка, которую вы предоставили, CSS не связана должным образом или что-то в этом роде, она не оформлена.   -  person Kyle    schedule 30.01.2012
comment
Зачем вам нужен div шириной 960 пикселей, если вы уже знаете, что собираетесь игнорировать 960 пикселей? Или вы имели в виду, что хотите, чтобы у div фиксированной ширины была полоса прокрутки?   -  person Mr Lister    schedule 30.01.2012
comment
я использую сетку 960px для эскизов. Я хочу игнорировать эти 960 пикселей, когда открываю контент. вот почему я должен игнорировать это!   -  person Thiago Correia Carneiro    schedule 30.01.2012
comment
Также я собираюсь проверить идентификаторы и классы!   -  person Thiago Correia Carneiro    schedule 30.01.2012

Ответы (1)


arrow_upward
0
arrow_downward

Во-первых, вы можете использовать javascript/jquery, чтобы вручную установить ширину расширенного div в соответствии с шириной страницы, но это очень хакерский подход, и я бы этого не рекомендовал.

Я бы порекомендовал вам пересмотреть структуру html. Вместо того, чтобы использовать одну оболочку контента шириной 960 пикселей, сделайте вашу оболочку шириной 100% с чередующимися рядами фотографий и «пустыми» 100%-ми элементами div, которые вы можете легко расширить. Итак, абстрагировано:

<div class="wrapper" style="width:100%;">
    <div class="row1" style="width:960px;left:50%;margin-left:-480px;height:100px;">
        <div class="gallery photo1">
            <!-- row of photo content -->
        </div>
    </div>
    <div class="row2" ... ...">
    </div>
    ..etc..
</div>

Ваш javascript может добавить div под щелкнутый div и установить стиль так, как вы хотите, и, поскольку родительский div будет иметь ширину 100%, вы можете добиться желаемого эффекта. Они будут хорошо складываться :).

person Oliver    schedule 30.01.2012
comment
Спасибо, Оливер! Я собираюсь попробовать это как можно скорее. Отпишусь здесь с отзывом. Действительно спасибо за помощь - person Thiago Correia Carneiro; 30.01.2012