Question

我正试图建立一个网站的页脚。在图像中，您可以看到它应该是什么，以及我得到了什么。我试图得到我的div secretarias的位置和我的div的位置direita，因为我希望我的蓝色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，这样做会填补余下的空间和文本中心。

样品

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

在flexbox中围绕div着色

1 个答案: