遇到的问题
最近开发一个小型项目,项目只有两个页面,一个主页面,一个列表页面。项目使用的是vue技术栈,在开发页面的组件是遇到了一个布局问题,布局如下:
要求:
1.外部容器的高度由图片决定
2.图片的宽度固定,右侧元素分配剩余空间
3.右侧元素的高度于图片的一样高
4.右侧上方文字不固定,但是最多不超过两行,下方文字总是位居底部
分析问题
由上面的要求可以得出以下结论:
1.这是一个两列等高布局
2.右侧是一个垂直方向的两端对齐布局
3.需要多行文本溢出
我们看一下这些问题的常见解决方案:
常见的两列等高布局解决方法
1.flex布局
<div class="demo1 demo">
<div class="left">left</div>
<div class="right">right</div>
</div>
.demo {
background-color: aliceblue;
}
.demo .left {
width: 100px;
height: 100px;
background-color: aquamarine;
}
.demo .right {
background-color: chartreuse;
}
.demo1 {
display: flex;
align-items: stretch;
}
.demo1 .right {
flex: 1;
}
.demo1 .left {
flex-shrink: 0; /*固定宽度*/
}
缺点: IE9及IE9以下版本不支持flex属性
优点:实现方便,还可以方便实现各种比例
2.使用margin和padding正负抵消
<div class="demo2 demo">
<div class="left">left</div>
<div class="right">right</div>
</div>
.demo {
background-color: aliceblue;
}
.demo .left {
width: 100px;
height: 100px;
background-color: aquamarine;
}
.demo .right {
background-color: chartreuse;
}
.demo2 {
overflow: hidden;
}
.demo2 .left,
.demo2 .right {
float: left;
margin-bottom: -9999px;
padding-bottom: 9999px;
}
.demo2 .right {
float: right;
width: calc(100% - 100px);
}
优点:兼容所有浏览器
3.table布局
<div class="demo3 demo">
<div class="left">left</div>
<div class="right">right<br/>right</div>
</div>