容器中可调整大小的内容 div
Resizable content div in container
我尝试在CSS中实现以下内容。
一个包含静态选项卡 div 和内容 div 的容器,当页面变小时内容也会变小。
选项卡 div 应该留在同一个位置。
澄清一下什么是图片。
我现在的代码:
.tabs {
padding-left: 30px;
padding-right: 30px;
width: 100%
}
.tabss {
clear: none;
width: 300px;
float: left;
}
.tabss-content {
position: relative;
left: 30%;
}
如果有人能帮助我,我将不胜感激。
这是您要找的吗?
body {
margin: 0;
}
ul {
list-style: none;
padding: 10px;
}
.tabs {
position: fixed;
top: 0;
left: 0;
width: 100px;
background-color: blue;
}
.content {
padding: 10px 10px 10px 150px;
background-color: green;
}
<div class="tabs">
<ul>
<li>tab one</li>
<li>tab two</li>
<li>tab three</li>
</ul>
</div>
<div class="content">
<p>content content content content content content content content content content content content content content content content content content content content content content content content content
</p>
</div>
我尝试在CSS中实现以下内容。 一个包含静态选项卡 div 和内容 div 的容器,当页面变小时内容也会变小。 选项卡 div 应该留在同一个位置。
澄清一下什么是图片。
我现在的代码:
.tabs {
padding-left: 30px;
padding-right: 30px;
width: 100%
}
.tabss {
clear: none;
width: 300px;
float: left;
}
.tabss-content {
position: relative;
left: 30%;
}
如果有人能帮助我,我将不胜感激。
这是您要找的吗?
body {
margin: 0;
}
ul {
list-style: none;
padding: 10px;
}
.tabs {
position: fixed;
top: 0;
left: 0;
width: 100px;
background-color: blue;
}
.content {
padding: 10px 10px 10px 150px;
background-color: green;
}
<div class="tabs">
<ul>
<li>tab one</li>
<li>tab two</li>
<li>tab three</li>
</ul>
</div>
<div class="content">
<p>content content content content content content content content content content content content content content content content content content content content content content content content content
</p>
</div>