flex简单布局示例

效果如下

image.png

代码如下

<style>
    
body{
    font-family: 黑体;
    font-size:14px;
}
span {
        color:red;
        font-size:16px;
    }
.fbox {
  display: flex;
  width: 400px; 
  height:120px;
  align-items: center;
  opacity: 0.9;
  background-size:400px 120px;
  border:1px solid #2894FF;
}
.child1 {
  background-color:white;
  margin: 3px;
}
.ch {
    border:1px solid white;
    margin:5px;
    line-height: 9px;
    opacity:0.9;
}
.child2 {
    border:1px solid #66B3FF;
    display:flex;
    align-items: center;
    line-height: 10px   
}

</style>
<body>
<div class=fbox>
<div class="child1">
    ![](./er.png)   
</div>
<div class="child2">
    <div class='ch'>
    <p>聚焦客户之声,打造<span>专业、高效</span>的服务体系</p>
    <p>以<span>客户体验</span>为核心,以<span>技术创新</span>为驱动</p>
        <p>成为产品及流程变革的有力<span>推动者</span></p>
</div>
</div>
</div>
</body>

存在问题

如果加图片背景的话,设置透明度会导致其上面的文字也变得透明,尚未解决~

总结

还是flex布局好用,让什么float之类的见鬼去吧

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,964评论 25 709
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,841评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,816评论 0 2
  • 李清照晚年在丈夫离世之后,曾在《武陵春》中有写道:“风住尘香花已尽,日晚倦梳头。物是人非事事休,欲语泪先流。”春秋...
    辛馨阅读 702评论 0 2
  • 最近跟一首诗很有缘,就是普希金1825年写的“假如生活欺骗了你”。 不久前,逛一家旧书店,无意间看到同名的普希金诗...
    随机漫步的傻妞阅读 483评论 0 4