Question

使用Notepad ++和HTML我想用文本：name将div排列成2,3,4三角形，顶部是金色div。这是我的代码到目前为止，我不知道如何以这种格式安排它们：家谱

<div style="position: relative;display: inline-block;height: 150px;width: 150px;
border-radius: 100%;border: 2px solid; margin-left: 5px;margin-top: 5px;text-align: center;">
<p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
</div>
<div style="position: relative;display: inline-block;height: 150px;width: 150px;
border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;">
<p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
</div>
<div style="position: relative;display: inline-block;height: 150px;width: 150px;
border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;">
<p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
</div>
<div style="position: relative;display: inline-block;height: 150px;width: 150px;
border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;">
<p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
</div>
<div style="position: relative;display: inline-block;height: 150px;width: 150px;
border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;">
<p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
</div>
<div style="position: relative;display: inline-block;height: 150px;width: 150px;
border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;">
<p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
</div>
<div style="position: relative;display: inline-block;height: 150px;width: 150px;
border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;">
<p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
</div>
<div style="position: relative;display: inline-block;height: 150px;width: 150px;
border-radius: 100%;border: 2px solid black;margin-left: 450px;margin-top: 5px;text-align: center;">
<p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
</div>
<div style="position: relative;display: inline-block;height: 150px;width: 150px;
border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;">
<p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
</div>

</body>
</html>

Answer 1

无论如何都不是代码的杰作，但似乎有效

<html>
<head>
</head>
<body>

<div style='width: 100%; text-align: center'>

    <div style="position: relative;display: inline-block;height: 150px;width: 150px;
    border-radius: 100%;border: 2px solid; margin-left: 5px;margin-top: 5px;text-align: center; background-color:gold">
    <p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
    </div><br />

    <div style="position: relative;display: inline-block;height: 150px;width: 150px;
    border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;">
    <p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
    </div>
    <div style="position: relative;display: inline-block;height: 150px;width: 150px;
    border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;">
    <p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
    </div><br />

    <div style="position: relative;display: inline-block;height: 150px;width: 150px;
    border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;">
    <p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
    </div>
    <div style="position: relative;display: inline-block;height: 150px;width: 150px;
    border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;">
    <p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
    </div>
    <div style="position: relative;display: inline-block;height: 150px;width: 150px;
    border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;">
    <p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
    </div><br />

    <div style="position: relative;display: inline-block;height: 150px;width: 150px;
    border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;">
    <p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
    </div>
    <div style="position: relative;display: inline-block;height: 150px;width: 150px;
    border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;">
    <p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
    </div>
    <div style="position: relative;display: inline-block;height: 150px;width: 150px;
    border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;">
    <p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
    </div>
    <div style="position: relative;display: inline-block;height: 150px;width: 150px;
    border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;">
    <p style="position: relative;margin-top: 50px;font-size: 25px;">name</p>
    </div>

</div>

</body>
</html>

将9个圆形div分成圣诞树形状

1 个答案: