Question

嗨，大家好我正在建立一个项目，其中每个孩子divs各自具有容器的全宽，显示内联，很像内联导航菜单。每个单独的子元素的宽度都包含父级的完整范围，但是一次只显示一个元素。我已经完成了这个，但是以非常低效的方式完成了它，我用一个空的空格html字符来实现这个效果。

    Here is the code I have used:


  <!DOCTYPE html>
    <html>
        <head>

            <style type="text/css">

                .parent > div{
                    display: inline;                
                }

                /*all child divs are displayed inline */

                .parent{
                    width:20%;  
                    position: relative;
                    overflow:hidden;
                    border:solid;
                }
                /* The parent container is going to be part of a dynamic jquery carousel so I have given the width a percentage
                */
                /*width does not apply to inline elements*/

                .children{
                    position: absolute;
                    width: 100%;
                }

                /*class to specify attributes shared by all the child divs of the parent container*/

                .child-1{
                    background-color: #8A2BE2;
                }

                /*First child div*/

                .child-2{
                    left:100%;
                    background-color: #FF7F50;
                }

                /*second child div*/

            </style>

        </head>

        <body>

            <div class="main-parent">
                <div class="parent">
                    <div class="children child-1">
                        First child 
                    </div>

                    <div class="children child-2">
                        Second child
                    </div>
                    &nbsp;
                </div>

            </div>
        </body>
    </html>

Answer 1

菜单项不一定需要保持“排队”，因为您无论如何都要一次显示它们。

如果您按照这样的方法最简单 - 所有导航项都是块全宽元素，并且您将包装器的高度设置为等于单个导航项，并通过javascript播放垂直定位等你想要的那个进入视野（而不是玩绝对定位元素的左变量）。

我认为，如果您难以解释一个概念，那么用户使用您的解决方案可能会更加困难，所以也许去绘图板看看可能缺少的细节对您有好处

css改变内联子div的宽度

1 个答案: