Question

我有以下HTML代码：

<div id="contentKeypoint"><h3>Keypoint</h3><span data-placeholder="keypointName" /></div>
<div id="contentInputs"><h3>Input(s)</h3><ul></ul></div>
<div id="contentInputGiver"><h3>Input Giver(s)</h3><ul></ul></div>
<div id="contentOutputs"><h3>Output(s)</h3><ul></ul></div>
<div id="contentOutputConsumer"><h3>Output Consumer(s)</h3><ul></ul></div>
<div id="contentResponsible"><h3>Responsible(s)</h3><ul></ul></div>
<div id="contentReviewer"><h3>Reviewer(s)</h3><ul></ul></div>

这7个DIV元素由JQuery后台服务填充。现在，我必须创建以下布局行为，这对我来说似乎很困难：

1。）DIV 1,2,3根据行中最大的元素应始终具有相同的高度

2。）DIV 4,5,6,7根据行中最大的元素应始终具有相同的高度

3。）区域（DIV？）8和9应该始终在整个高度的中间放置一个图标

4。）中间线应始终具有相同的基线（中间的间隙应在同一位置）

5。）整个结构的宽度不应影响中断线条的图标。

有人可以给我提示如何最好地管理此CSS问题吗？您将如何构造它？

这是我的小提琴： https://jsfiddle.net/schludi/Lxqf563j/

Answer 1

非常感谢您的帮助。我猜最好的方法是使用Paulie_D提到的CSS-Grid。

我现在使用表，单元格跨度和行跨度（不是我的初衷）做到的：

https://jsfiddle.net/schludi/Lxqf563j/

<table cellspacing="10">
  <tr>
    <td class="cellAlign">
      <div id="contentInputs"><h3>Input(s)</h3>
        <ul>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
        </ul>
      </div>
    </td>
    <td rowspan="2">
      <div id="verticalIconLine1">
          &copy;
      </div>
    </td>
    <td colspan="2" class="cellAlign">
      <div id="contentKeypoint"><h3>Keypoint</h3>
        Product requirements update
      </div>
    </td>
    <td rowspan="2">
      <div id="verticalIconLine2">
        &copy;
      </div>      
    </td>
    <td class="cellAlign">
      <div id="contentOutputs"><h3>Output(s)</h3>
        <ul>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>    
        </ul>
      </div>
    </td>    
  </tr>
  <tr>
    <td class="cellAlign">
      <div id="contentInputGiver"><h3>Input Giver(s)</h3>
        <ul>
            <li>DDsdfkl lksdjf lksdj k</li>
        </ul>
      </div>
    </td>
    <td class="cellAlign">
      <div id="contentResponsible"><h3>Responsible(s)</h3>
        <ul>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
        </ul>
      </div>
    </td>
    <td class="cellAlign">      
      <div id="contentReviewer"><h3>Reviewer(s)</h3>
        <ul>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
        </ul>
      </div>      
    </td>
    <td class="cellAlign">
      <div id="contentOutputConsumer"><h3>Output Consumer(s)</h3>
        <ul>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
            <li>DDsdfkl lksdjf lksdj k</li>
        </ul>
      </div>
    </td>    
  </tr>
</table>

创建带有中断中线的DIV布局的最佳方法

1 个答案: