Html 有没有语义上更好的方法来创建这种圆形文本布局？_Html_Css

Html 有没有语义上更好的方法来创建这种圆形文本布局？

html css

Html 有没有语义上更好的方法来创建这种圆形文本布局？,html,css,Html,Css,我想出了一种非常粗糙的、非语义的方法来编写我想要使用的设计。基本上，它是一组4个大小相等的圆，它们的中心与等边三角形的中心相同。我使用了一组表示div来解决两个问题：（1）为了获得正确的圆间距，我需要它们的边界框重叠；（2）为了在不改变大小的情况下垂直间隔圆圈中的文本，似乎我需要在CSS中使用display:table 这很有效，但我讨厌它，我觉得必须有更好的方法。我是CSS新手，这个方法是关于如何解决这个设计问题的大量研究的结果此代码笔的设计如下：（我在一堆元素上加上边框只是为了显示结构。

我想出了一种非常粗糙的、非语义的方法来编写我想要使用的设计。基本上，它是一组4个大小相等的圆，它们的中心与等边三角形的中心相同。我使用了一组表示div来解决两个问题：（1）为了获得正确的圆间距，我需要它们的边界框重叠；（2）为了在不改变大小的情况下垂直间隔圆圈中的文本，似乎我需要在CSS中使用display:table

这很有效，但我讨厌它，我觉得必须有更好的方法。我是CSS新手，这个方法是关于如何解决这个设计问题的大量研究的结果

此代码笔的设计如下：

（我在一堆元素上加上边框只是为了显示结构。）

以下是HTML：

<body>
  <h1 id="home_title">test</h1>
<div id="container_1">

    <div id="picture" class="box">
      <div class="circle_outer">
        <div class="circle_inner">
          <div class="inner-text">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/%22In_Which_We_Serve%22_Advertisement_1943.jpg/1024px-%22In_Which_We_Serve%22_Advertisement_1943.jpg" width=100%; />
          </div>
        </div>
      </div>
    </div>

    <div id="dog" class="box">
      <div class="circle_outer">
        <div class="circle_inner">
          <div class="inner-text">
            dog
          </div>
        </div>
      </div>
    </div>

    <div id="shoes" class="box">
      <div class="circle_outer">
        <div class="circle_inner">
          <div class="inner-text">
            shoes
          </div>
        </div>
      </div>
    </div>

    <div id="dance" class="box">
      <div class="circle_outer">
        <div class="circle_inner">
          <div class="inner-text">
            dance
          </div>
        </div>
      </div>
    </div>

    <div id="footer_1">
      Footer<br>
      test
    </div>

  </div>
</body>

我非常感谢任何想法或帮助。谢谢

嗯，我觉得你所做的真的很好。我不会太担心额外的div

但是，它可以用较少的div完成，利用浮动和保证金

html{
字体大小：16px；
}
h1#主页(标题){
文本对齐：居中；
字体大小：3rem；
保证金：0；
填充：.1rem0.5rem0；；
背景颜色：灰色；
}
货柜组1{
边框：绿色实心5px；
宽度：320px；
保证金：自动；
位置：相对位置；
框大小：边框框；
}
分区箱{
边框：红色实心1px；
位置：相对位置；
浮动：左；
宽度：53.6%；
文本对齐：居中；
背景色：透明；
框大小：边框框；
利润底部：-27%；
}
分区框：第n个子项（2n）{
浮动：对；
}
分区框：第n个子项（2n+1）{
浮动：左；
}
/*提供相对高度的伪元素，
每http://jsfiddle.net/simevidas/PFPDU/
及http://www.mademyday.de/css-height-equals-width-with-pure-css.html */
div.box:：before{
内容：“；
显示：块；
填充顶部：100%；
身高：0；
}
/*如果内部文本具有相对位置，则会影响包含框的大小*/
/*由于某些原因，将所有位置设置为零会迫使它进入圆内*/
.特色{
位置：绝对位置；
溢出：隐藏；
边框：黑色实心2px；
边界半径：50%；
/*要在四周创建呼吸空间，请将顶部和左侧设置为100%宽度的1/2（其中宽度=高度）*/
最高：5%；
左：5%；
宽度：90%；
身高：90%；
字号：2em；
}
.特色：之前{
内容：''；
左边距：-0.25em；
显示：内联块；
垂直对齐：中间对齐；
身高：100%；
}
/*所有基于W的百分比位置，源自事实
边界框外接相切圆，以及
圆心由等边三角形连接*/
分区页脚1{
边框：红色实心2px；
位置：相对位置；
宽度：100%；
左：0；
利润率最高：137%；
文本对齐：居中；
背景颜色：蓝色；
明确：两者皆有；
}


测试
狗
鞋
跳舞
页脚

测试

如果您使用的是html5，只需使用画布元素和javascript；我很快会在codepen上发布一个例子。谢谢你！我尝试使用浮动，但我发现这样做时无法使事情重叠。我显然做错了什么。我将仔细查看您的代码，找出我遗漏的技巧。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-size: 16px;
}

h1#home_title {
  text-align: center; 
  font-size: 3rem;
  margin: 0;
  padding: .1rem 0 .5rem 0;;
  background-color: grey;
}
div#container_1 {
  border: green solid 5px;
  width: 320px;
  margin: auto;
  position: relative;
}

div.box {
  border: red solid 1px; 
  position: absolute;
  width: 53.6%;
  text-align: center;
  background-color: transparent;
}

/*pseudo-element to give relative height,
per http://jsfiddle.net/simevidas/PFPDU/
and http://www.mademyday.de/css-height-equals-width-with-pure-css.html */

div.box::before {
  content: "";
  display: block;
  padding-top: 100%;
  height: 0;
}

/* if inner text has position relative, it influences the size of the containing box */
/*setting all of the positions to zero forces it inside the circle for some reason */

.circle_outer {
  position: absolute;
  overflow: hidden;
  border: black solid 2px;
  border-radius: 50%;
  /* to create breathing room all around, set top and left to 1/2 of 100% - width (where width = height) */
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
}

.circle_inner {
/*  border: grey solid 5px; */
  display: table;
  width: 100%;
  height: 100%;
}

.inner-text {
  display: table-cell;
/*  border: green solid 2px; */
  font-size: 2em;
  vertical-align: middle;
}

/*First bounding box is at upper left corner */
div#picture {
  overflow: hidden;
  left: 0;
  margin-top: 0;
}

/*Percent positions all based on W, derived from fact
that bounding boxes circumscribe tangent circles, and 
circle centers are connected by equilateral triangles */

div#dog {
  left: 46.4%;
  margin-top: 26.8%;
}
div#shoes {
  left: 0;
  margin-top: 53.6%;
}

div#dance {
  left: 46.4%;
  margin-top: 80.4%;
}

div#footer_1 {
  border: red solid 2px;
  position: relative;
  width: 100%;
  left: 0;
  margin-top: 137%;
  text-align: center;
  background-color: blue;
}