我有一个列表占据了我正在尝试设置图像框的高度空间的100%
小提琴:https://jsfiddle.net/wrdvkgyj/
我通过将我的图像容器设置为内联来接近,但图片似乎又被推出了,我不确定这里出了什么问题..
HTML:
<div id="wrapper">
<div class="project-list">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</div>
<div id="image-container">
<div class="image-holder">
<img src="https://semantic-ui.com/images/wireframe/image.png">
</div>
</div>
<div class="description-container"></div>
</div>
CSS:
/* wrapper */
html, body {
width: 100%;
height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
border: 1px solid black;
}
/* project list */
.project-list {
border: 1px solid #cccc;
float: left;
font-size: 25px;
width: 30%;
height: 100%;
overflow-x: hidden;
}
.project-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.project-list li {
float: left;
clear: left;
width: 100%;
padding: 10px;
transition: all .3s ease;
}
.project-list li:nth-child(even){
background-color: #f8f8f8;
}
/*li-hover*/
.project-list li:hover {
color: red;
background-color: #d8d8d8;
cursor: pointer;
}
答案 0 :(得分:1)
你做的一切都正确,只需将#image-container
的宽度更改为0.并将box-sizing: border-box;
添加到您的CSS中。希望这个帮助
*{
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
border: 1px solid black;
box-sizing: border-box;
}
/* project list */
.project-list {
border: 1px solid #cccc;
float: left;
font-size: 25px;
width: 30%;
height: 100%;
overflow-x: hidden;
}
.project-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.project-list li {
float: left;
clear: left;
width: 100%;
padding: 10px;
transition: all .3s ease;
}
.project-list li:nth-child(even){
background-color: #f8f8f8;
}
/*li-hover*/
.project-list li:hover {
color: red;
background-color: #d8d8d8;
cursor: pointer;
}
#image-container{
width: 0;
}
<div id="wrapper">
<div class="project-list">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</div>
<div id="image-container">
<div class="image-holder">
<img src="https://semantic-ui.com/images/wireframe/image.png">
</div>
</div>
<div class="description-container"></div>
</div>