感觉很简单的东西但是就是一直没正确的做出来。
我先描述一下我想做的效果是:
比如说是有3个部分,左边一张图,右边分为上下两行文字,我想让右边的两行文字,分别和左边的图片顶部对齐和底部对齐,顶部对齐很简单,但是底部对不齐。我看网上说的把右下部分的那行文字display:table-cell然后vertical-align: bottom;底部对齐,虽然底部对齐了,但是内容宽度变窄了,跟display:inline-block差不多的效果了,,,
我之前给右上的文字加margin-bottom或者padding-bottom把下面那排文字挤下去,但是也只是视觉上的对齐了,但也不是绝对的底部对齐
我想问问还有没有其他的简单办法可以做成底部对齐啊?
如果不用flex 能想到的就是绝对定位吧- -以上两位都说了
可以用flex布局,做了个小的demo
http://codepen.io/loebmraz/pen/mPYzJw
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
/* 方法一 */
/*
img {border:1px solid red;}
.s1 {border:1px solid black;}
.s2 {border:1px solid blue;}
div {border:1px solid purple;}
img {float:left;}
.s2 {display:block; line-height:266px;}
div {height:161px; width:500px; overflow:hidden;}
*/
/*方法二*/
img {border:1px solid red;}
.s1 {border:1px solid black;}
.s2 {border:1px solid blue;}
div {border:1px solid purple;}
img {float:left;}
.s2 {position:absolute; bottom:0; left:161px;}
div {height:161px; width:500px; position:relative;}
</style>
</head>
<body>
<div>
<!--图片大小160x160-->
<img src="img.jpg" />
<span class="s1">第一行文字</span>
<span class="s2">第二行文字</span>
</div>
</body>
</html>