- CSS
- father::布局样式, 多列布局
- child::antd form中线对齐
问题
一列内容里，希望“中线”左侧容器向左扩展、右侧容器向右扩展；中线并不一定在容器几何中心，左右宽度可能不等。
方案对比
- child::分列布局实现中线对齐
- child::
表格布局实现中线对齐
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .row { display: table-row; width: 100%; } .cell { display: table-cell; } .left { text-align: right; } .center { width: 1px; } .right { text-align: left; } </style> </head> <body> <div class="row"> <div class="cell left">左侧可变ddddasdfsadfsd</div> <div class="cell center">中线锚点</div> <div class="cell right">右侧可变</div> </div> <div class="row"> <div class="cell left">左侧可变</div> <div class="cell center">中线锚点</div> <div class="cell right">右侧可变ddddd</div> </div> <div class="row"> <div class="cell left">左</div> <div class="cell center">中线锚点</div> <div class="cell right">右侧可变dddddddddddd</div> </div> </body> </html>