V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
paparika
V2EX  ›  前端开发

一个简单的 flex 布局问题

  •  
  •   paparika · 2018-03-30 12:13:07 +08:00 · 1540 次点击
    这是一个创建于 2419 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <view class="wrapper">
    <image class="icon" src='../../images/ic.png'></image>
    <view class="text">text</view>
    </view>

    请教如何用 flex 布局实现这样一个布局,text 在 wrapper 内始终水平居中,icon 始终在 text 左边,并与 text 保持固定距离,另外 text 与 icon 的垂直方向位置一致
    7 条回复    2018-03-30 16:07:32 +08:00
    paparika
        1
    paparika  
    OP
       2018-03-30 12:15:36 +08:00
    大致这种感觉
    | |
    | icon text |
    | |
    paparika
        2
    paparika  
    OP
       2018-03-30 12:16:39 +08:00
    上个楼作废,大致这种感觉 |*icon***text********|
    chenno9
        3
    chenno9  
       2018-03-30 15:27:05 +08:00
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .wrapper{
    width: 100%;
    display: flex;
    background-color: #ccc;
    justify-content: center;
    }
    .icon{
    width: 200px;
    background-color: red;
    margin-right: 50px;
    }
    .text{
    width: 500px;
    background-color: yellow;

    }
    .blank{
    width: 250px;
    }
    </style>
    </head>
    <body>
    <div class="wrapper">
    <div class="icon">icon</div>
    <div class="text">text</div>
    <div class="blank"></div>
    </div>
    </body>
    </html>
    rabbbit
        5
    rabbbit  
       2018-03-30 15:49:31 +08:00
    一定要用 flex 吗?
    <view class="wrapper">
    <!-- <image class="icon" src='../../images/ic.png'></image> -->
    <view class="text">text</view>
    </view>
    .wrapper {
    display: block;
    background: #ff0;
    width: 100%;
    justify-content: center;
    }

    .text {
    margin: 0 auto;
    display: block;
    width: 50px;
    height: 50px;
    border:1px solid black;
    position:relative;
    }

    .text:before {
    background: #fff url(../../images/ic.png);
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    border: 1px solid black;
    position: absolute;
    left: -100px;
    }
    paparika
        6
    paparika  
    OP
       2018-03-30 16:07:05 +08:00
    结贴
    paparika
        7
    paparika  
    OP
       2018-03-30 16:07:32 +08:00
    @chenno9
    @rabbbit 谢谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1048 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 20:09 · PVG 04:09 · LAX 12:09 · JFK 15:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.