将相对定位元素放置在浮动DIV中

时间：2016-07-13 09:43:50

标签： html css

我一直在尝试为我的网站制作一个包含3个元素的个人资料栏，链接，图片和文本（<p>），个人资料栏本身就是一个div容器。

选择相对位置的原因是因为浏览器缩放时元素重叠，但是还有另一个问题，当浏览器缩放时，容器内容将开始消失，然后图像将包裹到元素的底部。

HTML＆amp;配置文件栏容器的CSS：

<div class="profilebar">
    <a class="profilename" style="cursor: pointer;" >{{ username }} &blacktriangledown;</a>
    <img class="profilepicture" src="{{ avatar }}"></img>
    <p class="balance" style="text-decoration:none">${{ balance }}</p>
</div>


.profilename {
  position: relative;
  margin-top: 0.4%;
  margin-left: 4%;
  font-family: sans-serif;
  width: 0.5%;
  font-size: 11pt;
  color: white;
  text-decoration: none;
}
.profilepicture {
  position: absolute;
  margin-left: 1.4%;
}
.balance {
  position: relative;
  margin-top: 3%;
  color: red;
  font-family: sans-serif;
  font-size: 12pt;
  color: #C90205;
  margin-left: 45.3%;
}

Fiddle（尝试在fullscreen mode中缩小浏览器，您会看到结果。）

是否存在容器无法使元素浮动的问题？我想让它到达导航按钮（Button1-4）而没有相互重叠的元素，这是最好的方法吗？

3 个答案:

答案 0 :(得分：1)

在＆＃34;配置文件栏上设置固定的像素宽度＆＃34;容器，而不是百分比。

.profilebar {
   float: right;
   width: 150px;
   height: 7%;
   margin-top: 0.5%;
   margin-right: 1%;
   min-width: 70px;
}

在这里您可以看到宽度为150px的示例：

https://jsfiddle.net/c7qoh9xg/

答案 1 :(得分：1)

float: left;会导致换行链接，位于menu下方 见https://jsfiddle.net/hv5r8kxh/4/

答案 2 :(得分：0)

检查更新的小提琴 - https://jsfiddle.net/afelixj/hv5r8kxh/2/

更改了profilepicture和profilename的顺序

*,
*::before,
*::after {
  box-sizing: border-box;
}
*::selection {
background-color: #F06262;
}
*::-moz-selection {
background-color: #F06262;
}
html,
body {
  margin: 0;
  height: 100%;
  background-color: #2B2B2B;
}
.main {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 10%;
  z-index: 1;
  min-height: 120px;
  max-height: 120px;
  background-color: rgba(26, 26, 26, 0.9);
   
  min-width: 800px;
}
.logo {
  display: block;
  float: left;
  top: 3%;
  left: 0;
  right: 3%;
  /*background-image: url('images/logo.png');
width: 150px;
height: 155px;*/
  font-size: 32pt;
  font-family: sans-serif;
  color: white;
  margin-top: 3.5%;
  margin-left: 1.3%;
}
.menu {
  display: inline-block;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(26, 26, 26, 0.9);
  width: 100%;
  border-style: solid;
  border-color: rgba(26, 26, 26, 0.9);
  border-radius: 0;
  z-index: 1;
  /* max-height: 8%; */
  /* max-width: 102.5%; */
  min-height: 55px;
  min-width: 800px;
  overflow: hidden;
}
.button1 {
  display: block;
  font-size: 10pt;
  float: left;
  right: 15%;
  left: 30%;
  top: 0%;
  white-space: nowrap;
  color: white;
  margin-top: 0%;
  width: 7%;
  font-family: sans-serif;
  height: 3%;
  padding: 25px 2px 55px 2px;
  vertical-align: center;
  text-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 100px;
  transition: 0.1s ease-in;
}
.button1:hover {
color: #C90205;
}
.button2 {
  font-size: 10pt;
  float: left;
  right: 10%;
  left: 23%;
  top: 10%;
  white-space: nowrap;
  color: white;
  width: 7%;
  margin-top: 0%;
  font-family: sans-serif;
  height: 3%;
  text-align: center;
  padding: 25px 0px 55px 0px;
  text-align: center;
  vertical-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 100px;
  transition: 0.1s ease-in;
}
.button2:hover {
  color: #C90205;
}
.button3 {
  font-size: 10pt;
  float: left;
  right: 10%;
  left: 23%;
  top: 3%;
  white-space: nowrap;
  color: white;
  margin-top: 0%;
  width: 7%;
  font-family: sans-serif;
  height: 3%;
  text-align: center;
  padding: 25px 0px 55px 0px;
  text-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 100px;
  transition: 0.1s ease-in;
}
.button3:hover {
  color: #C90205;
}
.button4 {
  font-size: 10pt;
  float: left;
  right: 10%;
  left: 23%;
  top: 3%;
  white-space: nowrap;
  color: white;
  margin-top: 0%;
  width: 7%;
  font-family: sans-serif;
  height: 3%;
  text-align: center;
  padding: 25px 0px 55px 0px;
  text-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 100px;
  transition: 0.1s ease-in;
}
.button4:hover {
  color: #C90205;
}
.button5 {
  font-size: 10pt;
  float: left;
  right: 10%;
  left: 23%;
  top: 3%;
  white-space: nowrap;
  color: white;
  margin-top: 0%;
  width: 7%;
  font-family: sans-serif;
  height: 3%;
  text-align: center;
  padding: 25px 0px 55px 0px;
  text-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 100px;
  transition: 0.1s ease-in;
}
.button5:hover {
  color: #C90205;
}
.button6 {
  font-size: 10pt;
  float: left;
  right: 10%;
  left: 23%;
  top: 8%;
  white-space: nowrap;
  color: white;
  margin-top: 0%;
  font-family: sans-serif;
  height: 10%;
  width: 7%;
  text-align: center;
  height: 10%;
  text-align: center;
  padding: 28px 0px 55px 0px;
  text-align: center;
  line-height: 2px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 100px;
  transition: 0.1s ease-in;
}
.button6:hover {
  color: #C90205;
}
.profilebar {
  float: right;
  width: 11%;
  height: 7%;
  margin-top: 0.5%;
  margin-right: 1%;
  min-width: 180px;
}
.profilename {
  position: relative;
  margin-top: 0.4%;
  margin-left: 4%;
  font-family: sans-serif;
  /* width: 0.5%; */
  font-size: 11pt;
  color: white;
  text-decoration: none;
float: right;
}
.profilepicture {
  /* position: absolute; */
  margin-left: 15px;
float: right;
}
.balance {
  position: relative;
  margin-top: 25px;
  color: red;
  font-family: sans-serif;
  font-size: 12pt;
  color: #C90205;
text-align: right;
  /* margin-left: 45.3%; */
}
.mainpage {
  position: relative;	
  height: calc(93% - 185px);
  width: 100%;
  min-height: 430px;
  min-width: 800px;
}
<div class="main">
<a class="logo" href="/" style="text-decoration:none">Sample Text</a>
</div>

<div class="menu">
<a class="button1" href="/" style="text-decoration:none">Button 1</a>
<a class="button2" href="/" style="text-decoration:none">Button 2</a>
<a class="button3" href="/" style="text-decoration:none">Button 3</a>
<a class="button4" href="/" style="text-decoration:none">Button 4</a>
<a class="button5" href="/" style="text-decoration:none">Button 5</a>
 	<a class="button6" href="/" style="text-decoration:none">Button 6</a>
 	<div class="profilebar">
 		<img class="profilepicture" src="http://i.imgur.com/9xyQ4DW.png" />
 		<a class="profilename" style="cursor: pointer;" >username &blacktriangledown;</a>
 		<p class="balance" style="text-decoration:none">$0</p>
 	</div>
</div>

<div class="mainpage"></div>

相关问题
最新问题