我不希望侧边栏重叠图像。所以基本上我想让他们并排,我认为问题是我有一个立场:绝对的;在侧边栏中,但当我删除它时,侧边栏和图像不会留在原地。
body {
text-decoration: none;
margin: 0 auto;
max-width: 100% !important;
height: auto;
}
.fundo img {
max-width: 100% !important;
height: auto;
}
.menuleft {
background-color: #CDD0D2;
list-style-type: none;
position: absolute;
width: 9%;
height: 100%;
display: table;
}
.menuleft ul {
display: table-cell;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
vertical-align: middle;
}
#text {
-webkit-box-shadow: inset -7px 4px 5px 0px rgba(0, 0, 0, 0.22);
-moz-box-shadow: inset -7px 4px 5px 0px rgba(0, 0, 0, 0.22);
box-shadow: inset -7px 4px 5px 0px rgba(0, 0, 0, 0.22);
width: 100%;
height: 17%;
color: white;
text-align: center;
text-decoration: none;
background-color: #F06D22;
}
.menuleft li a {
font-family: Futura LT, 'Trebuchet MS', Arial;
letter-spacing: 0.28vw;
color: #fff;
text-decoration: none;
height: 100%;
text-align: center;
display: flex;
vertical-align: middle;
align-items: center;
justify-content: center;
width: 100%;
writing-mode: tb-rl;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
white-space: nowrap;
}
.menuleft li:hover {
text-decoration: none;
background: rgba(255, 255, 255, 0.2);
}
.menuleft li a:hover {
text-decoration: none;
color: #fff;
}
#whitebar {
text-decoration: none;
display: table;
width: 100%;
height: 3px;
background-color: #fff;
writing-mode: tb-rl;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(180deg);
white-space: nowrap;
bottom: 0;
margin: 0 auto;
}
.image {
width: 92%;
height: 100%;
}
.image img {
width: 100%;
height: 100%;
}
<div class="menuleft">
<ul>
<li id="text">
<a href="#">Eficácia</a>
</li>
<li id="whitebar">
</li>
<li id="text">
<a href="#">Rapidez</a>
</li>
<li id="whitebar">
</li>
<li id="text">
<a href="#">Impacto <br> na vida real</a>
</li>
<li id="whitebar">
</li>
<li id="text">
<a href="#">Tecnologia <br> avançada</a>
</li>
<li id="whitebar">
</li>
<li id="text">
<a href="#">Segurança</a>
</li>
</ul>
</div>
<div class="image">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" />
</div>
为.image类添加浮动属性
.image { float:right; }
在你的css中试试:
body{
text-decoration: none;
margin: 0 auto;
max-width:100% !important;
height:auto;}
.fundo img{
max-width:100% !important;
height:auto;}
.menuleft {
background-color: #CDD0D2;
list-style-type: none;
position: relative;
width: 9%;
height: 100%;
display:inline-block;
}
.menuleft ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
#text {
-webkit-box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22);
-moz-box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22);
box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22);
width: 100%;
height: 17%;
color: white;
text-align: center;
text-decoration: none;
background-color: #F06D22;
}
.menuleft li a {
font-family: Futura LT,'Trebuchet MS', Arial;
letter-spacing: 0.28vw;
color: #fff;
text-decoration: none;
height: 100%;
text-align: center;
display: flex;
vertical-align: middle;
align-items: center;
justify-content: center;
width: 100%;
writing-mode: tb-rl;
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform:rotate(180deg);
transform: rotate(180deg);
white-space:nowrap;
}
.menuleft li:hover {
text-decoration: none;
background: rgba(255,255,255,0.2);
}
.menuleft li a:hover {
text-decoration: none;
color: #fff;
}
#whitebar{
text-decoration: none;
display: table;
width: 100%;
height: 3px;
background-color: #fff;
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform:rotate(90deg);
transform: rotate(180deg);
white-space:nowrap;
bottom:0;
margin: 0 auto;
}
.image {
width: 90%;
height:100%;
display:inline-block;
}
.image img {
width: 100%;
height: 100%;
}
你在CSS上使用的是"class"(.)标签,而不是"id"(#)标签,所以试着把HTML上所有的"id"标签都改成"class"。像这样:
<body>
<div class="menuleft">
<ul>
<li class="text">
<a href="#">Eficácia</a>
</li>
<li class="whitebar">
</li>
<li class="text">
<a href="#">Rapidez</a>
</li>
<li class="whitebar">
</li>
<li class="text">
<a href="#">Impacto <br> na vida real</a>
</li>
<li id="whitebar">
</li>
<li class="text">
<a href="#">Tecnologia <br> avançada</a>
</li>
<li class="whitebar">
</li>
<li class="text">
<a href="#">Segurança</a>
</li>
</ul>
</div>
<div class="image">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" />
</div>
根据demo 2下面的注释理解更新了demo
演示1 css修改.menuleft {
background-color: #CDD0D2;
list-style-type: none;
/*position: absolute;*/
width: 9%;
height: 100%;
/*display: table;*/
float: left; /* float to left */
}
.menuleft ul {
/*display: table-cell;*/ /* remove this */
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
vertical-align: middle;
}
.menuleft li a {
font-family: Futura LT, 'Trebuchet MS', Arial;
letter-spacing: 0.28vw;
color: #fff;
text-decoration: none;
/*height: 100%;*/
text-align: center;
display: flex;
vertical-align: middle;
align-items: center;
justify-content: center;
width: 100%;
writing-mode: tb-rl;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
white-space: nowrap;
}
.image {
width: 91%; /* remaining space */
height: 100%;
float: right; /* add this to float it to right */
}
body{
text-decoration: none;
margin: 0 auto;
max-width:100% !important;
height:auto;
}
.fundo img{
max-width:100% !important;
height:auto;
}
.menuleft {
background-color: #CDD0D2;
list-style-type: none;
position: absolute;
width: 9%;
height: 100%;
display: table;
}
.menuleft ul{
display: table-cell;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
vertical-align: middle;
}
.text {
-webkit-box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22);
-moz-box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22);
box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22);
width: 100%;
height: 17%;
color: white;
text-align: center;
text-decoration: none;
background-color: #F06D22;
}
.menuleft li a {
font-family: Futura LT,'Trebuchet MS', Arial;
letter-spacing: 0.28vw;
color: #fff;
text-decoration: none;
height: 100%;
text-align: center;
display: flex;
vertical-align: middle;
align-items: center;
justify-content: center;
width: 100%;
writing-mode: tb-rl;
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform:rotate(180deg);
transform: rotate(180deg);
white-space:nowrap;
}
.menuleft li:hover {
text-decoration: none;
background: rgba(255,255,255,0.2);
}
.menuleft li a:hover {
text-decoration: none;
color: #fff;
}
.whitebar{
text-decoration: none;
display: table;
width: 100%;
height: 3px;
background-color: #fff;
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform:rotate(90deg);
transform: rotate(180deg);
white-space:nowrap;
bottom:0;
margin: 0 auto;
}
.image {
list-style-type: none;
padding: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto auto auto 9%;
}
.image img {
width: 100%;
height: 100%;
}
<body>
<div class="menuleft">
<ul>
<li class="text">
<a href="#">Eficácia</a>
</li>
<li class="whitebar">
</li>
<li class="text">
<a href="#">Rapidez</a>
</li>
<li class="whitebar">
</li>
<li class="text">
<a href="#">Impacto <br> na vida real</a>
</li>
<li class="whitebar">
</li>
<li class="text">
<a href="#">Tecnologia <br> avançada</a>
</li>
<li class="whitebar">
</li>
<li class="text">
<a href="#">Segurança</a>
</li>
</ul>
</div>
<div class="image">
<img src="http://wallpaperfx.com/uploads/wallpapers/2016/04/14/18521/preview_vatna-glacier-icelend.jpg" />
</div>
</body>