Я знаю, что есть много ответов на эту тему, но ни один из них не помог мне, и я провел дни на Эта проблема. 90% ответов и книг дают этот фоновой трюк, который мне не помог.
HTML
<body >
<h1>Hello Plunker!</h1>
<div class="sidebar">
<ul>
<li><a href="#">ANALYTICS</a></li>
<li><a href="#">STYLES</a></li>
<li><a href="#">VOTERS</a></li>
<li><a href="#">GET STARTED</a></li>
<li><a href="#">UPDATE</a></li>
</ul>
</div>
<div class="content">
<p>Content</p>
</div>
CSS
body{
width: 100%;
margin: 0 auto;
}
.content {
width: 95%;
display: inline;
float: left;
background: url(http://s9.postimg.org/ft91z9c6z/bg_content.png) repeat-y left top;
}
.sidebar{
width: 5%;
display: inline;
height: 100%;
float: left;
background: url(http://s21.postimg.org/kexv3aupf/bg_sidebar.png) repeat-y left top;
}
.sidebar ul{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.sidebar li{
padding: 50%;
position: relative;
}
.sidebar a{
display: block;
font-size: 0.5em;
position: absolute;
bottom: 0;
left: 0;
}
Прямо сейчас мой макет выглядит следующим образом:
И я хочу, чтобы это выглядело так:
Я последовал за этим , предложенным в возможном дубликате, и он не " Помощь
Я думаю, это потому, что я использую floats
и fluid layout
.
Как я могу расширить столбцы, сохраняя позиционирование fluid layout
и float
.