查看: 305|回复: 3
打印 上一主题 下一主题

[讨论] CSS规范缺陷?无法设置本元素换行而后面元素不换行?

[复制链接]
  • TA的每日心情
    擦汗
    2020-7-3 13:51
  • 签到天数: 19 天

    [LV.4]偶尔看看III

    90

    主题

    277

    回帖

    1万

    积分

    状元

    Rank: 9Rank: 9Rank: 9

    积分
    10032
    跳转到指定楼层
    1
    发表于 2020-6-19 10:55:26 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

    <span id="1">A</span>
    <span id="2">B</span>
    <span id="3">C</span>
    <span id="4">D</span>
    <span id="5">E</span>
    <span id="6">F</span>
    <span id="7">G</span>
    <span id="8">H</span>
    <span id="9">I</span>

    对于上面这个HTML,想显示成如下效果:
    ABC
    DEF
    GHI
    在CSS中应该如何设置呢?这个小例子是对词库排版时经常可以遇到的问题。

    要想让<span id="4">D</span>相对于前面内容换行,它自己就必须设置成block(不能靠前面的id="3"标签设置成block来实现,否则id="3"标签就与id="2"标签不在同一行了);而后面id="5"要与id="4"同行,id="4"又必须设置成inline —— 这正好是矛盾的,无法实现。

    CSS规范似乎只能设置某标签是否独占一行,而缺少换行方面的设置机制:如果想对某标签的内容相对于前面标签内容是否换行显示的设置,仅仅影响本标签自己,至于本标签后面的标签相对于本标签是否换行完全由后面标签自己来设置而不受前面本标签样式的影响 —— 这是达不到的?!

    不知现有规范有何方案能达到以上目的?




  • TA的每日心情
    慵懒
    2021-9-28 14:33
  • 签到天数: 158 天

    [LV.7]常住居民III

    5

    主题

    907

    回帖

    1万

    积分

    状元

    Rank: 9Rank: 9Rank: 9

    积分
    17310

    QQ 章灌水大神章笑傲江湖章推广专家

    2
    发表于 2020-6-19 11:58:16 | 只看该作者
    本帖最后由 atauzki 于 2020-6-19 12:02 编辑

    Chrome测试通过, 参考文章:https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-of-type

    1. <!doctype html>
    2. <head>
    3.   <style>
    4.   .main>span:nth-of-type(3n):after{content:"\A";display:block}
    5.   </style>
    6. </head>
    7. <body>
    8.   <div class="main">
    9.     <span id="1">A</span>
    10.     <span id="2">B</span>
    11.     <span id="3">C</span>
    12.     <span id="4">D</span>
    13.     <span id="5">E</span>
    14.     <span id="6">F</span>
    15.     <span id="7">G</span>
    16.     <span id="8">H</span>
    17.     <span id="9">I</span>
    18.   </div>
    19. </body>
    复制代码
  • TA的每日心情
    开心
    2019-1-18 23:55
  • 签到天数: 230 天

    [LV.7]常住居民III

    72

    主题

    1027

    回帖

    11万

    积分

    状元

    Rank: 9Rank: 9Rank: 9

    积分
    117972

    QQ 章

    3
    发表于 2020-6-19 19:31:55 | 只看该作者
    利用伪元素,插入一段空的block即可。
    #3::after {content:''; display: block;}
  • TA的每日心情
    擦汗
    2020-7-3 13:51
  • 签到天数: 19 天

    [LV.4]偶尔看看III

    90

    主题

    277

    回帖

    1万

    积分

    状元

    Rank: 9Rank: 9Rank: 9

    积分
    10032
    4
     楼主| 发表于 2020-6-21 09:02:45 | 只看该作者
    问题得到解决了。多谢atauzki dfliaoyue两位好心人!
    怎么都还是感觉CSS应该推出一个正式的样式专门解决这个问题,而不要用伪类这种间接的方法实现。