如何使用 GetSkeleton 将一个 'div' 居中并使另一个 'div' 浮动？

Question

我想使用任何 GetSkeleton 将一个 div 居中并向右浮动另一个。我如何使用 GetSkeleton 或任何其他响应式框架来做到这一点？

我的问题和这个类似Center one <div> and float other right 但我使用的是 GetSkeleton，因此内容会在移动设备上垂直堆叠。

Answer 1

我想通了

<style type="text/css">
    .Menu {
        position: absolute;
        margin-top: 8%;
        right: 5%;
    }

    ul.Menu {
        -webkit-padding-start: 0;
        padding: 0;
        padding-left: 0px;
        margin-left: 0px;
        list-style-type: none;
    }

    ul.Menu li {
        font-size: 1.2em;
        font-weight: bold;
    }

    @media screen and (max-width: 400px) {
        .Menu {
            position: relative;
            margin-top: 0%;
            right: 0px;
        }

        ul.Menu li {
            position: relative;
            right: 0px;
            text-align: left;
            text-align: center;
        }
    }

</style>

    <div class="row">
        <div class="twelve columns" style="margin-top: 2%; text-align:center;">
            <img src="Content/images/logo.png" alt="Logo" style="width:15%; min-width:150px;" />
        </div>
        <ul class="Menu">
            <li>About us</li>
            <li>Careers</li>
            <li>Contact us</li>
        </ul>
    </div>

如何使用 GetSkeleton 将一个 'div' 居中并使另一个 'div' 浮动？

How to use GetSkeleton to Center one 'div' and float other 'div' right?

html

css

mobile-website

skeleton-css-boilerplate