是否有一种语义上更好的方法来创建圈子中的文本布局？

Question

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

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

设计就在这个代码中：http://codepen.io/bhagerty/pen/rejEPZ

（我将边框放在一堆元素上以显示结构。）

这是HTML：

* {
  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;
}

这是CSS：

// Load requirements
var PORT = process.env.PORT || 8081;//just change port for other servers
var express = require("express");
var app = express();
var http = require("http").Server(app);
var io = require("socket.io")(http);
var async = require('async'); // async is optional for this example ...
var client = require('socket.io-client');

app.use(express.static(__dirname + '/public'));

// save hosts here ...
var otherServers = {
  server1: {
    url: 'http://localhost:8082'
  },
  server2: {
    url: 'http://localhost:8083'
  },
};

// Add a connect listener
io.on('connection', function (socket) {
  console.log('Client connected.');
  //when server receive message from client
  socket.on('message_from_browser', function (message) {
      console.log("Message from browser broadcasted: " + message.text);
      var updated_message = {
         text: message.text,
         port: PORT
      };

      // choice how server will receive this message ...
      // then send it
      otherServers.server1.client.broadcast.emit('server_message', updated_message);
  });

  // Disconnect listener
  socket.on('disconnect', function () {
      console.log('Client disconnected.');
  });
});

async.each(otherServers, function forEachOtherServer(otherServer, next) {
  //connect to another server
  otherServer.client = client.connect(otherServer.url, { reconnect: true });
  // to something more if need in every client connection ...

  otherServer.client.on('connect', function (x) {

    otherServer.client.on('server_message', function (message) {
        console.log('RECEIVED MESSAGE FROM ANOTHER SERVER ON PORT '+ message.port + ": " + message.text);
        //socket.broadcast.emit('message_from_server', message_server);
    });
    console.log('Connected!');
  });

  next();
}, function afterConnectInAllServers(err) {
  if (err) throw err;
  // to something after connect in all servers ...
});

http.listen(PORT, function (req, res) {
  console.log("Server Started on port: " + PORT);
});

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

Answer 1

嗯，IMO你做的非常好。我不会太担心额外的div。

但是，可以使用更少的div来完成，利用浮动和边距。

Codepen is here

＆＃13;

＆＃13;

html {
  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;
  box-sizing: border-box;
}

div.box {
  border: red solid 1px; 
  position: relative;
  float:left;
  width: 53.6%;
  text-align: center;
  background-color: transparent;
  box-sizing:border-box;
  margin-bottom:-27%;
}
div.box:nth-child(2n) {
  float:right;
}
div.box:nth-child(2n+1) {
  float:left;
}

/*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 */

.featuring {
  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%;
  font-size: 2em;
}
.featuring:before {
  content:'';
  margin-left:-0.25em;
  display:inline-block;
  vertical-align:middle;
  height:100%;
}

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

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

＆＃13;

<body>
  <h1 id="home_title">test</h1>
<div id="container_1">
   
    <div id="picture" class="box">
        <div class="featuring">
             <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 id="dog" class="box">
      <div class="featuring">
            dog
      </div>
    </div>
    
    <div id="shoes" class="box">
      <div class="featuring">
            shoes
      </div>
    </div>

    <div id="dance" class="box">
      <div class="featuring">
            dance
      </div>
    </div>
    
    <div id="footer_1">
      Footer<br>
      test
    </div>

  </div>
</body>

＆＃13;

＆＃13;

＆＃13;