Question

我描绘了我想做的事情，但我似乎无法解决这个问题。

我想要的是什么：

enter image description here

我目前有导航但是它全部在div中，我想要做的是分割它，有两个不同的div，每个div都有不同的内容。

这是我的实际代码。

更新：

CSS

#nav
{
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:7%;
    text-align: center;
    padding: .5em 0 1em 0;
    z-index: 1;
    overflow: hidden;
    background-image: -webkit-gradient(
    linear,
    right top,
    left bottom,
    color-stop(0, #E1A141),
    color-stop(0.43, #DF7266)
        );
    background-image: -o-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
    background-image: -moz-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
    background-image: -webkit-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
    background-image: -ms-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
    background-image: linear-gradient(to left bottom, #E1A141 0%, #DF7266 43%);
    }

    div#a
    {
    float: left !important;
    width: 50%;
    display:inline !important;
    }

    div#b
    {
    float: left !important;
    width: 50%;
    }

    #nav > ul
    {
        width:40%;
        line-height: 0px;
        display: inline-block;
    }

        #nav > ul:before,
        #nav > ul:after
        {
            content: 'sentido';
            width: 300%;
            position: absolute;
            top: 50%;
            margin-top: -2px;

            height: 5px;
            border-top: solid 1px rgba(192,192,192,0.35);
            border-bottom: solid 1px rgba(192,192,192,0.35);
        }

        #nav > ul:before
        {
            left: 100%;
            margin-left: 1px;
        }

        #nav > ul:after
        {
            right: 100%;
            margin-right: 1px;
        }

        #nav > ul > li
        {
            display: inline-block;
            margin: -9px 0.5em 0 0.5em;
            border-radius: 0.5em;
            padding: 0.85em;
            border: solid 1px transparent;
            -moz-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
            -webkit-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
            -o-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
            -ms-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
            transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
        }

            #nav > ul > li.active
            {
                border-color: rgba(192,192,192,0.35);
            }

            #nav > ul > li > a,
            #nav > ul > li > span
            {
                display: block;
                color: inherit;
                text-decoration: none;
                border: 0;
                outline: 0;
            }

            #nav > ul > li > ul
            {
                display: none;
            }

HTML

                <nav id="nav" style="z-index: 9999;" id="navigation">
                    <div id="a">
                    <ul>
                        <li><a href="index.html">Inicio</a></li>
                        <li><a href="#banner" class="scrolly">Encuentra</a></li>
                        <li><a href="right-sidebar.html">Aventura al Azar</a></li>
                        <li><a href="#footer" class="scrolly">Contacto</a></li>
                    </ul>
                    </div>
                    <div id="b"> holibebe </div>
                </nav>

非常感谢任何帮助。

谢谢，恩里克·布拉沃。

Answer 1

将div（1和2）设置为其父级的50％，在这种情况下为nav元素，然后浮动div并清除它们。

基本示例，关闭图像：

JsFiddle Example

内部导航导航（两个不同的菜单）

1 个答案: