在 flexbox 中围绕 div 着色

Question

我正在尝试制作网站的页脚。在图像中，您可以看到它应该是怎样的，以及我得到了什么。我试图获取名为 secretarias 的 div 的位置和名为 direita 的 div 的位置，因为我希望我的蓝色 div 在这两个周围着色，就像在图像中一样。

但是 jquery 的位置不起作用。而且我什至不确定这是一个很好的方法。我只想为这两个 div 周围的颜色多着色几个像素，并在周围设置圆形边框。

另外：我无法让 div "rights" 在中心完全对齐。它是唯一有问题的，因为它的字体大小必须比其他字体小一点。

/*
var position = $("#secretarias").position();
var bottom_l = position.bottom;
var left_l = position.left;

$("#rodapecor01").css("bottom: ",bottom_l, "left: ",left_l);

var position2 = $("#direita").position();
var bottom_r = position2.bottom;
var left_r = position2.left;

$("#rodapecor02").css("bottom: ",bottom_r, "left: ",left_r);

I couldn't make my JQuery work here but you can check it on the fiddle: http://jsfiddle.net/o2gxgz9r/552/
*/

#rodape {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 27.5%;
	background: #e7e7dc;
	
	font-size: 3vh;
	font-family: PT_Sans-Web-Regular;
	text-align: center;
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}

#organizador {
	width: 48.60015522%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	flex-flow: row nowrap;
	justify-content: space-around;
}

#centro {
	width: 90%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	flex-flow: row nowrap;
	justify-content: flex-start;
}

#secretarias {
	width: 11.95230368%;
	background: #541324;
	color: white;
	text-align: right;
}

.linha {
	width: 4%;
	text-align: center;
}
.menurodape {
	text-align: center;
}

#direita {
	width: 39.4475411%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	flex-flow: row nowrap;
	justify-content: space-between;
	background: #541324;
	color: white;
}

#mapadosite {
	
}

#rights {
	font-size: 1.5vh;
	text-align: center;
}

#rodapecor01 {
 /* background:#541324; */
 background: lightblue;
  position: absolute;
  bottom: 15%;
  left: 5%;
  width: 5%;
  height: 5%;
}

#rodapecor02 {
 /* background:#541324; */
 background: lightblue;
  position: absolute;
  bottom: 15%;
  right: 5%;
  width: 5%;
  height: 5%;
}

#rodapelinha {
  background:#541324;
  position: absolute;
  bottom: 27%;
  width: 100%;
  height: 2%;
}
#whatimtryingtodo{
	background: url('https://i.imgsafe.org/60c6fb0a1d.jpg');
	background-repeat: no-repeat;
	position:absolute;
	top: 20px;
	width: 100%;
	height: 500px;
}

What I'm trying to do:
<div id="whatimtryingtodo">
</div>
<br><br><br><br><br><br><br><br>
What I got:
<div id="rodapelinha">
</div>

<footer id="rodape">
  <div id="secretarias">SECRETARIAS:</div>
	<div id="organizador">
		<div id="centro">
			<div class="menurodape">DESENVOLVIMENTO</div>
			<div class="linha">|</div>
			<div class="menurodape">SAÚDE</div>
			<div class="linha">|</div>
			<div class="menurodape">EDUCAÇÃO</div>
			<div class="linha">|</div>
			<div class="menurodape">SEGURANÇA</div>
			<div class="linha">|</div>
			<div class="menurodape">CULTURA</div>
		</div>
	</div>
	
	<div id = "direita">
		<div id="mapadosite">MAPA DO SITE</div>
		<div id="rights">© 2016 UNA-SUS/UFCSPA - Todos os direitos reservados </div>
	</div>
	
</footer>


<div id="rodapecor01">
</div>
<div id="rodapecor02">
</div>

Answer 1

如果您删除绝对定位的 div 并为您的相关 div 添加边框半径，您很可能会获得所需的结果。 （我还添加了一个小填充来展示如何使彩色区域更大一点）

更新的 CSS 规则

#secretarias {
  ...
  padding: 5px 10px;
  border-radius: 10px;
}
#direita {
  ...
  padding: 5px 10px;
  border-radius: 10px;
}

为了使rights 元素中的文本居中，我将其设置为flex: 1，这样它将填充剩余的空间并使文本居中。

样本

#rodape {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 27.5%;
  background: #e7e7dc;
  font-size: 3vh;
  font-family: PT_Sans-Web-Regular;
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
#organizador {
  width: 48.60015522%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-flow: row nowrap;
  justify-content: space-around;
}
#centro {
  width: 90%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-flow: row nowrap;
  justify-content: flex-start;
}
#secretarias {
  width: 11.95230368%;
  background: #541324;
  color: white;
  text-align: right;
  padding: 5px 10px;
  border-radius: 10px;
}
.linha {
  width: 4%;
  text-align: center;
}
.menurodape {
  text-align: center;
}
#direita {
  width: 39.4475411%;
  display: flex;
  justify-content: space-between;
  background: #541324;
  color: white;
  padding: 5px 10px;
  border-radius: 10px;
}
#mapadosite {
}
#rights {
  flex: 1;
  font-size: 1.5vh;
  text-align: center;
}
#rodapelinha {
  background: #541324;
  position: absolute;
  bottom: 27%;
  width: 100%;
  height: 2%;
}

<div id="rodapelinha">
</div>

<footer id="rodape">
  <div id="secretarias">SECRETARIAS:</div>
  <div id="organizador">
    <div id="centro">
      <div class="menurodape">DESENVOLVIMENTO</div>
      <div class="linha">|</div>
      <div class="menurodape">SAÚDE</div>
      <div class="linha">|</div>
      <div class="menurodape">EDUCAÇÃO</div>
      <div class="linha">|</div>
      <div class="menurodape">SEGURANÇA</div>
      <div class="linha">|</div>
      <div class="menurodape">CULTURA</div>
    </div>
  </div>

  <div id="direita">
    <div id="mapadosite">MAPA DO SITE</div>
    <div id="rights">© 2016 UNA-SUS/UFCSPA - Todos os direitos reservados</div>
  </div>

</footer>