更改窗口大小时将div修复为其他div

Question

问题是语音气泡仅固定在浏览器的某个宽度的选项卡上：

请参阅here自己尝试一下。

相关代码

<ion-tabs class="tabs-icon-top tabs-positive">
  <div class="bubble-bar-tabs">
    <div class="b-home"></div>
    <div class="b-about"></div>
    <div class="b-cont"></div>
  </div>
  <ion-tab title="Home" icon="ion-home" href="#/tab/home">
    <ion-nav-view name="home-tab"></ion-nav-view>
  </ion-tab>
  <ion-tab>...
  <ion-tab>...
</ion-tabs>

带

.bubble-bar-tabs {
    position: absolute;
}

.b-home {
    display: block; 
    line-height: normal;
    z-index: 1000;
    position: absolute;
    left: 3rem;
    top: -75px;
    width: 219px;
    height: 70px;
}

如何修复所有浏览器窗口大小/屏幕尺寸的语音气泡与标签的对齐方式？谢谢。

Answer 1

您应该尝试在宽度和高度而不是像素的值上使用百分比，因为百分比值取决于屏幕大小和包含它的元素。所以对于你的css代码我建议应该是这样的：

try {       
    int firstSpace = search_str.indexOf(" "); // detect the first space character
    firstName = search_str.substring(0, firstSpace);  // get everything upto the first space character
    lastName = search_str.substring(firstSpace).trim(); // get everything after the first space, trimming the spaces off
        }
catch (Exception c){}

宽度百分比值可让您将气泡保持在特定的屏幕尺寸。另外，我建议制作一个保证金，使气泡不会相互干扰。

对于移动设备，您需要实施.b-home { display: block; line-height: normal; z-index: 1000; position: absolute; left: 3rem; top: -75px; width: 33%; height: 70px; } 以启用移动设备的自定义css。这方面的一个例子是：

@media screen

Answer 2

Your problem is based on your HTML Structure.

each <div class="b-home"></div> shall be a son of a <ion-tab title=... element.

Then change your CSS with

.b-home {
    display: block; 
    line-height: normal;
    z-index: 1000;
    position: absolute;
    left: 50%; // here you specify that the start of the bubble is 50% from left, adapt it to your need
    **top: -5px;** // Here, you specify that your content is 5 pexel HIGHER than the top
    width: 219px; 
    height: 70px;
}

Moreover, concerning width and height, Having a fix width a height will resolve of content overlapping other content when page change size. Much better use a % to addapt to page height & width.