我想出了一种看起来非常古怪、非语义的方法来编写我想使用的设计。基本上，它是一组 4 个大小相等的圆圈，它们的中心与等边三 Angular 形的中心相同。我使用了一堆展示性 div 来解决两个问题:(1) 为了使圆圈的间距正确，我需要它们的边界框重叠； (2) 在不改变圆圈大小的情况下垂直放置圆圈中的文本，看来我需要在我的 CSS 中使用 display:table。
它有效，但我讨厌它，我觉得必须有更好的方法。我是 CSS 的新手，这种方法是对如何解决这个设计问题进行了大量研究的结果。
设计在这个codepen:http://codepen.io/bhagerty/pen/rejEPZ
(我在一堆元素上加了边框只是为了显示结构。)
这是 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>
这是 CSS:
* {
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;
}
我非常感谢任何想法或帮助。谢谢!
最佳答案
好吧，IMO，你所做的真的很棒。我不会太在意额外的 div。
但是，它可以用更少的 div，利用 float 和边距来完成。
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;
}<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>关于html - 有没有语义上更好的方法来创建这种圆圈文本布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36108914/