Question

我想在内盒外面的中间位置绘制两个圆圈，但是在左侧和右侧的外侧框内，如下图所示。有人可以给我一些暗示吗？

    <div style="border: 1px solid red; width: 200px">
        <div style="text-align: center;">
            <i class="fa fa-circle"></i>
        </div>
        <div style="border: 1px solid red; margin: 0px 20px">
            <p class="title" style="width: 200px">This is a line</p>
            <p class="title" style="width: 200px">This is 2nd line</p>
        </div>
        <div style="text-align: center;">
            <i class="fa fa-circle"></i>
        </div>
    </div>

============= 我用表来模拟，看起来非常好。

<table>
  <tr>
    <th></th>
    <th>
        <div style="text-align: center;">
            <i class="fa fa-circle"></i>
        </div>
    </th>
    <th></th>
  </tr>
  <tr>
    <td>
        <div style="text-align: center;">
            <i class="fa fa-circle"></i>
        </div>
    </td>
    <th>
            <div style="border: 1px solid red; margin: 0px">
                <p class="title" style="width: 200px">This is a line</p>
                <p class="title" style="width: 200px">This is 2nd line</p>
            </div>
    </th>
    <th>
        <div style="text-align: center;">
            <i class="fa fa-circle"></i>
        </div>        
    </th>
  </tr>
  <tr>
    <td></td>
    <td>
        <div style="text-align: center;">
            <i class="fa fa-circle"></i>
        </div>
    </td>
    <td></td>
  </tr>
</table>

Answer 1

您可以在此处使用相对和绝对定位的混合。容器上的相对定位告诉其子元素，根据我的界限定位自己＆＃34;。所以你可以这样做：

＆＃13;

  <div style="border: 1px solid red; width: 200px; position: relative;">
        <div style="text-align: center; position: absolute; left: 0; top: 50%;">
            <i class="fa fa-circle">*</i>
        </div>
        <div style="border: 1px solid red; margin: 0px 20px">
            <p class="title" style="width: 200px">This is a line</p>
            <p class="title" style="width: 200px">This is 2nd line</p>
        </div>
        <div style="text-align: center; position: absolute; right: 0; top: 50%;">
            <i class="fa fa-circle">*</i>
        </div>
    </div>

＆＃13;

......话虽如此，像这样的内联样式很难维护并且随着时间的推移变得非常头疼。您应该阅读将CSS与HTML分离，将这些样式移动到样式表中，并通过类将它们链接回元素。

Answer 2

有了一点css，这应该很容易！您可以将父div设置为position: relative;，将圆圈设置为position: absolute; 位置，即left: 20px;或right: -5%;。这将告诉圆圈从其父级的最左侧移动20px。

如果您想要将圆圈准确地放在中间位置，则应将px宽度更改为百分比，并将relative＆amp; absolute与position一起使用以移动圆圈周围。

这里有更多信息！ https://css-tricks.com/absolute-positioning-inside-relative-positioning/

CSS左右开箱绘制圆圈

2 个答案: