CSS更改内联子div的宽度

Question

嗨，大家好，我正在构建一个项目，每个孩子的div分别具有容器的整个宽度，内联显示，非常类似于内联导航菜单。 每个单独的子元素的宽度都包含父元素的整个范围，但是一次仅显示一个元素。 我已经完成了此操作，但是以一种非常低效的方式完成了此操作，我使用了一个空白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进行垂直定位，这样可以看到所需的内容（而不是使用绝对定位元素的left变量）。

我认为，如果您很难解释一个概念，那么用户使用您的解决方案可能会更加困难，因此，也许可以前往制图板，看看可能缺少哪些细节，这对您有好处。

CSS更改内联子div的宽度

问题描述

1 个解决方案

解决方案1
1 2014-10-04 19:06:17

CSS更改内联子div的宽度

问题描述

1 个解决方案

解决方案1 1 2014-10-04 19:06:17

解决方案1
1 2014-10-04 19:06:17