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

关于前端布局的一个小问题

  •  1
     
  •   plantparknet · 2016-09-23 12:39:35 +08:00 · 1977 次点击
    这是一个创建于 3008 天前的主题,其中的信息可能已经有所发展或是发生改变。

    开发环境,本地 chrome + macOS 我最近参照阿禅的微信排版格式用 python 代码写了一个批处理脚本,但是呢,在处理完成后的部分效果如图所示:

    1.顶部的文字无法居中

    2.引用部分的右括号位置移位

    在 2 中,我尝试通过 margin-top:-8%,拉开与文本之间的距离,结果与上方段落有重合。

    要达成的效果如下图:

    编写的 html 文件链接,最好下载到本地用 chrome 查看,在 cdn 变形严重。

    http://7rf31y.com1.z0.glb.clouddn.com/index.html

    阿禅教程链接:

    http://mp.weixin.qq.com/s?__biz=MjM5ODQwMjA4MA==&mid=2649293603&idx=1&sn=57f38200555dcba76d6358594416c089&scene=1&srcid=0922hwo0hW1YFpZ5km00qu8f#rd

    8 条回复    2016-09-23 15:50:44 +08:00
    66beta
        1
    66beta  
       2016-09-23 13:34:08 +08:00
    一言难尽,楼主还是学一下 css 吧
    learnshare
        2
    learnshare  
       2016-09-23 13:48:17 +08:00
    margin-top:-8% 这个可能会带来更多的问题
    plantparknet
        3
    plantparknet  
    OP
       2016-09-23 14:26:10 +08:00
    @66beta 如果有大师点播的话,学习会更快一点哈~~
    @learnshare 是,感觉是无奈之举,测试过一些,也就它暂时有效
    kamal
        4
    kamal  
       2016-09-23 14:38:44 +08:00
    为什么不直 F12(windows+chrome)看教程文章?
    Benisme
        5
    Benisme  
       2016-09-23 14:45:32 +08:00
    第二个根据你的代码最简单的修改就是在文字那段清除浮动。至于第一个,我用 ie 和 chrome 看到的都是居中,不知道啥情况
    plantparknet
        6
    plantparknet  
    OP
       2016-09-23 15:31:13 +08:00
    @Benisme 中间字符 float:none?好像并不行
    Benisme
        7
    Benisme  
       2016-09-23 15:42:04 +08:00
    @plantparknet clear:both
    plantparknet
        8
    plantparknet  
    OP
       2016-09-23 15:50:44 +08:00
    @Benisme 搞定。
    第一个问题, chrome 中不知为何显示 text-align:left.当手动改成 center 后,其后的标题均 center 了
    ![]( http://7rf31y.com1.z0.glb.clouddn.com/WechatIMG15.jpeg)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1751 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 16:30 · PVG 00:30 · LAX 08:30 · JFK 11:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.