html - 在 float DIV 中放置相对定位的元素

Question

我一直在尝试为我的网站制作一个配置栏，其中包含 3 个元素、链接、图片和一个文本 ( <p> )，配置栏本身是一个 div 容器。

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

配置文件栏容器的 HTML 和 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 中缩小浏览器，您会看到结果)。

---

是否存在容器无法使元素正确 float 的问题？我希望它到达导航器按钮 (Button1-4) 而内部元素不会相互重叠，最好的方法是什么？

Answer 1

在“profilebar”容器上设置固定的像素宽度，而不是百分比。

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

在这里你可以看到一个宽度为 150px 的例子:

https://jsfiddle.net/c7qoh9xg/