HTML + CSS垂直菜单及其旁边的“新闻”框

Question

我一直在尝试重新创建此网站： http : //imgur.com/oXLboQx

到目前为止，我已经知道了： http : //imgur.com/rRC0bOK

我想知道如何固定垂直菜单，以使它不会在整个页面上延伸，并且如何将整个“ Naujienos”内容也放置在图片旁边？ 我假设使用.col-left和.col-right？

编辑：通过使用display：inline-block固定拉伸； 在左上角。

<html>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <head>
        <title>Mokausi HTML, CSS ir JS</title>
    </head>

    <style>
    /*visas css eina cia*/
        body, html{
            margin: 0;
            padding: 0;
            line-height: 19px;
            font-size: 15px;
        }
        .cf:before, /*clear fix klase*/
        .cf:after {
            content:"";
            display:table;
        }

        .cf:after {
            clear:both;
        }
        .cf {
            zoom:1;
        }

        .tipoPaveiksliukas{
            background: #fff;
            width: 150px;
            height: 140px;

            /*reikia papildyti cia bisky*/
        }

        .main{
            position: relative;

            width: 800px;
            margin: 0 auto;
            background: #C6E070;


            /*reikia papildyt*/
        }
        .kalbos{
            position: absolute;
            top: 0;
            right: 10px;
            background: #287D7D;
            padding: 2px 5px;
            color: #fff;
        }
        .kalbos:hover{
            cursor: pointer;
        }
        .visosKalbos{
            position: absolute;
            top: 23px;
            right: 10px;
            background: #1C344C;
            padding: 5px;
            z-index: 10;
            display: none;
        }
        .visosKalbos a{
            display: block;
            color: #fff;
            text-decoration: none;
        }

        body{
            background: #F2F2F2;
            font-family: "Arial";
            color: #1C344C;
        }
        .shadow{
        }



        .header{
        margin-top:7px;
        font-size:26;
        font-style:italic;


        }

        .menu-horizontal-wrap{
            margin: 10px 20px 5px 20px;
            background-color: #287D7D;
            padding:10px;

        }
        .menu-horizontal-wrap a{
            color:#FFF;
            text-decoration: none;
            padding: 6px;


        }
        .menu-horizontal-wrap a:hover{
            /*galite improvizuoti*/
            background-color:gray;

        }
        .menu-horizontal-wrap a:last-child{ /*paskutinis virsutinio meniu elementas kazkoks kitoks*/

        }
        .col-left{


        }
        .col-right{

        }

        .menu-vertical-wrap{
            margin: 10px 20px 5px 20px;
            background-color: #287D7D;
            padding:10px;

        }
        .menu-vertical-wrap a{
            color:#FFF;
            text-decoration: none;
            padding: 6px;

        }
        .menu-vertical-wrap a:hover{
            /*galite improvizuoti*/

        }

        h1{

        }

        .naujiena{

        }


        a.cta{
            color:white;
            text-decoration: none;


        }
        a:hover.cta{
            /*kas nutika kai uzvedate pele ant cta mygtuko, galite improvizuoti*/

        }
        .cta h3{
            background-color:#287D7D;

            width: 150px;
            height: 110px;
            float:left;
            margin: 0px 20px 10px 20px;
            text-align: center;

            position: relative; 
            top: 0px;
            left: 100px;

        }

        .lentele{
            border-collapse: collapse;
            border:1px solid black;
            /*reikia papildyti*/
        }
        .lentele th{
            background:black;
            color:white;


        }
        .lentele td{
            border:1px solid black;


        }
        .lentele tr{
            background-color:#A8A8A8;
            border:1px solid black;

        }

        .lentele tbody tr:nth-child(even) {
    background-color: #D0D0D0 ;}



        .footer{

        }

    </style>

    <body>
        <div class="shadow">
        <div class="main cf">
            <div class="kalbos">Kalba</div>
            <div class="visosKalbos">
                <a href="#">Lietuviu</a>
                <a href="#">English</a>
                <a href="#">Pa Ruski</a>
            </div>
            <div class="header" align="center"> <b>MANO MOKOMASIS PUSLAPIS</b> </div>
            <div align="center" class="menu-horizontal-wrap">
                <a href="#">MENIU PUNKTAS | </a>
                <a href="#">MENIU PUNKTAS | </a>
                <a href="#">MENIU PUNKTAS | </a>
                <a href="#">MENIU PUNKTAS </a>
            </div>

            <div class="cf">
                <div class="col-left">
                    <div class="menu-vertical-wrap">
                        <a href="#">Meniu punktas</a><br>
                        <a href="#">Meniu punktas</a><br>
                        <a href="#">Meniu punktas</a><br>
                        <a href="#">Meniu punktas</a><br>
                        <a href="#">Meniu punktas</a><br>
                        <a href="#">Meniu punktas</a><br>
                        <a href="#">Meniu punktas</a><br>
                        <a href="#">Meniu punktas</a><br>
                    </div>
                </div> <!-- end of col-left -->

                <div class="col-right">
                    <h1>Naujienos</h1>
                    <hr size=1>
                    <div class="naujiena cf">
                        <p>
                            <div class="tipoPaveiksliukas"></div>
                            <h2>Naujienos antraste</h2>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in dignissim lacus. Curabitur consequat pharetra placerat. Nullam pretium vehicula tortor. Vivamus diam orci, consectetur ullamcorper eleifend ut, aliquet a arcu. Phasellus congue eleifend rhoncus. Vestibulum vulputate bibendum rutrum.
                        </p>
                    </div>

                    <div class="naujiena cf">
                        <p>
                            <div class="tipoPaveiksliukas"></div>
                            <h2>Naujienos antraste</h2>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in dignissim lacus. Curabitur consequat pharetra placerat. Nullam pretium vehicula tortor. Vivamus diam orci, consectetur ullamcorper eleifend ut, aliquet a arcu. Phasellus congue eleifend rhoncus. Vestibulum vulputate bibendum rutrum.
                        </p>
                    </div>

                    <div class="cta-wrap cf">
                        <a href="#" class="cta"><h3>Spausk <br> mane</h3></a>
                        <a href="#" class="cta"><h3>Spausk <br> mane</h3></a>
                        <a href="#" class="cta"><h3>Spausk <br> mane</h3></a>

                    </div>

                    <table width="400" style="text-align:center;" align="center" class="lentele">
                        <thead>
                            <tr>
                                <th>Antraste</th>
                                <th>Antraste</th>
                                <th>Antraste</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Foo</td>
                                <td>Foo</td>
                                <td>Foo</td>
                            </tr>
                            <tr>
                                <td>Bar</td>
                                <td>Bar</td>
                                <td>Bar</td>
                            </tr>
                            <tr>
                                <td>Foo</td>
                                <td>Foo</td>
                                <td>Foo</td>
                            </tr>
                            <tr>
                                <td>Bar</td>
                                <td>Bar</td>
                                <td>Bar</td>
                            </tr>
                        </tbody>
                    </table>

                </div> <!-- end of col-right -->
            </div> <!-- end of cf -->
            <hr size=1>
            <div align="center" class="footer"> Mano labai kietas web'as &copy visos teises saugomos</div>
        </div> <!-- end of main -->

        <script>
        // reikia papildyti sita koda kad dar karta paspaudus ant kalbos mygtuko kalbu pasirinkimas uzsidarytu
            var kalbuBusena = 'closed';

            $('.kalbos').click(function(){
                $('.visosKalbos').slideToggle('fast');
                kalbuBusena = 'open';

            });

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

Answer 1

尝试使用此CSS：

.col-right {
   display: inline-block;
   vertical-align: top;
   width:600px;
}

.col-left { 
   display:inline-block; 
}

jsFiddle演示。