Html 我正试着让一些div响应

我在试着让一些div有反应，实际上这是一个joomla模块。但它没有反应。我的模板是响应的。我把那个模块放在一个位置，但是如果调整屏幕的大小，它会变大，并超出那个位置。 我从第一个div（YJYC容器）开始，并将宽度设置为100%。这是一个好的开始，因为我注意到如果我调整屏幕大小，结果是“好的”。但我必须在其他部门做这件事，对吗？。 我该如何继续？ 这是html

<div id="YJYSC_container<?php echo $container_poz ?>" style="height:<?php echo $slider_height ?>px; width:<?php echo $slider_width ?>px;">
    <!-- navigator -->
    <div id="navigator_outer" style="height:<?php echo $slider_height ?>px; width:<?php echo  $thumb_width +30 ?>px;">
        <ul id="navigator">
            <?php foreach ($yousclides as $youscslide):?>
            <li class="element" style="height:<?php echo $slider_height / $visibleItems  ?>px">
                <div class="inner" style="width:<?php echo $thumb_width + 30 ?>px;height:<?php echo $slider_height / $visibleItems   ?>px">
                    <div class="inner_over" style="width:<?php echo $thumb_width +30 ?>px;height:<?php echo $slider_height / $visibleItems -12  ?>px">
                        <div class="border_out" style="height:<?php echo $slider_height / $visibleItems -20  ?>px;width:<?php echo $thumb_width + 0 ?>px;">
                            <div class="border_in" style="height:<?php echo $slider_height / $visibleItems -20  ?>px;width:<?php echo $thumb_width + 0 ?>px;">
                                <?php if($youscslide['img_url'] != "") echo $youscslide['img_tumb']; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <?php endforeach;?>
        </ul>
    </div>
    <!-- end of navigator, start slides -->
    <div id="slides" style="height:<?php echo $slider_height ?>px; width:<?php echo $slider_width  ?>px;">
        <?php foreach ($yousclides as $youscslide):?>
        <div class="slide" style="height:<?php echo $slider_height ?>px; width:<?php echo $slider_width  ?>px;"> <a href="<?php echo $youscslide['link'] ?>" title="">
            <?php if($youscslide['img_url'] != "") echo $youscslide['img_out'] ?>
            </a>
            <div class="long_desc" style="width:<?php echo $intro_desc_width ?>;height:<?php echo $intro_desc_height ?>;<?php echo $intro_desc_pozi ?>">
                <h1><a href="<?php echo $youscslide['link'] ?>" title=""><?php echo  $youscslide['title'] ?></a></h1>
                <?php echo $youscslide['intro'] ?> <a href="<?php echo $youscslide['link'] ?>" title="" class="yousc_readon"><?php echo JText::_('YOUSC_READ') ?></a> </div>
        </div>
        <?php endforeach;?>
    </div>
</div>

使用以下命令：

@media screen and (max-width: 900px) {
    #YJYSC_container, #YJYSC_container_l {
        width: 100% !important;
        height: auto !important;
    }

    #YJYSC_container_l #navigator_outer {
          position: relative !important;
          width: 100% !important;
          height: auto !important;
          margin-bottom: 20px;
    }

    #YJYSC_container #slides, #YJYSC_container_l #slides {
          width: 100% !important;
    }

    #YJYSC_container #slides div.slide, #YJYSC_container_l #slides div.slide {
        width: 100% !important;
    }
    #YJYSC_container #navigator li.element div.inner, #YJYSC_container_l #navigator li.element div.inner,
    #YJYSC_container #navigator li.element div.inner_over, #YJYSC_container_l #navigator li.element div.inner_over,
    #YJYSC_container_l #navigator li.element div.inner div.inner_over .border_out,
    #YJYSC_container #navigator li.element div.inner div.inner_over .border_in, #YJYSC_container_l #navigator li.element div.inner div.inner_over .border_in,
    #YJYSC_container #navigator li.element div.inner div.inner_over .border_in, #YJYSC_container_l #navigator li.element div.inner div.inner_over .border_in img{
        width: 100% !important;
        height: auto !important;
        float: none !important;
    }

    #YJYSC_container #navigator li.element, #YJYSC_container_l #navigator li.element {
        float: left;
        width: 33% !important;
        height: auto !important;
        clear: none !important;
    }

    #YJYSC_container #navigator, #YJYSC_container_l #navigator {
        overflow: auto !important;
    }
}

此代码在宽度小于900px的设备上触发。它仍然需要更多的工作，但响应性开始变得有意义

更新的JSFIDLE:

使用百分比，因此，如果在100%div中使用25%作为div，这意味着宽度将是上div的25%，并且可以超过上div。除非使用固定宽度，否则您不必将其放在任何其他内容上。请看一下bootstrap，一个完全响应的框架。“没有必要重新发明轮子。”曼佐普，这就是我要做的。我从一开始就拿了所有的div，然后用百分比“玩”……我们不能用你提供的代码帮助你。要么创建一个JSFIDLE，要么你必须用浏览器的开发工具检查你的页面，浏览每个元素以检查哪个元素具有固定宽度，然后将其更改为响应。这是一个好的开始，我的朋友。非常感谢。我想我必须对其他屏幕做同样的操作…记住使用！重要信息，因为用于滑块的脚本将宽度和高度应用于所有内联元素，并且您只能使用！重要的如果答案有帮助，请投赞成票或打正确的分数。是的，它有帮助！我开始明白下一步该做什么了。