我一直在尝试重新创建这个网站：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 © 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>