如何格式化带有标题和文本的颜色矩形？

Question

我需要使用HTML5 / CSS3 / JS在HTML页面上创建此布局。 请告知，如何实现？

彩色矩形应该有一些填充，标题应该在左边对齐，十进制值应该在水平方向上垂直对齐。我试图使用表格来实现这一点，但如何使用div进行此操作？

如何根据彩色矩形高度和宽度来缩放十进制值的字体大小？

Answer 1

你可以使用一个带有一些css的div：

<div class="cont" title="caption">123</div>

.cont
{ 
  position:relative;
  width:300px; 
  height:200px; 
  line-height:200px;
  text-align:center;
  font-size:60px;
  color:#FFF;
  background-color:green;
}
.cont:before
{
  content:attr(title);
  font-size:18px;
  position:absolute;
  line-height:1em;
  top:10px;
  left:10px;
  z-index:1;
}

你可以在这里玩它：example in codepen.io(which is how you should post questions next time - better to play with existing code)

Answer 2

检查出来：

https://jsfiddle.net/3xrxz1oa/

HTML

<div id="container">123</div>

JS用于计算字体大小

var containter = document.getElementById("container");
containter.innerHtml = 'test'
var fontSize = parseInt(containter.clientHeight/2)+"px";
containter.style.fontSize = fontSize;

CSS样式

#container {
    height:200px;
    width:90%;
    background-color:#1CB254;
    color: white;
    padding:5%;
    text-align: center;    
}

#container::before {
    content: "Caption";
    font-size: 20px;
    position: absolute;
    top: 20px;
    left: 20px;
}

我根据身高计算了字体大小。你可以做更复杂的计算。

Answer 3

以flex-box

为中心非常容易

body {
  font: normal 1em/1 sans-serif;
}

.box {
  align-items: center;
  background-color: #2db051;
  color: white;
  display: flex;
  justify-content: center;
  height: 220px;
  position: relative;
  width: 460px;
}
.box:before {
  content: attr(data-caption);
  font-size: 18px;
  left: 20px;
  position: absolute;
  text-transform: uppercase;
  top: 20px;
}
.box strong {
  font-size: 80px;
}

<div class="box" data-caption="caption">
  <strong>123</strong>
</div>

Flexbox需要在实时（https://autoprefixer.github.io/）之前加上前缀。