找到你要的答案

Q:Fixate divs to other divs when changing window size

Q:固定的div其他div窗口大小改变时

Problem is that the speech bubbles are only fixated to the tabs for a certain width of the browser: enter image description here

See here to try out yourself.

Relevant code is

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

with

.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;
}

How to fix the alignment of the speech bubbles to the tabs for all browser windows sizes/screen sizes? Thank you.

Problem is that the speech bubbles are only fixated to the tabs for a certain width of the browser: enter image description 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;
}

如何修正语音气泡对齐到所有浏览器窗口大小/屏幕尺寸的标签?谢谢您.

answer1: 回答1:

You should try using percentages on values with width and height instead of pixels because the a percent value is dependent upon screen size and the element that contains it. So for your css code I would suggest should look like this:

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

The width percentage value would enable you to keep the bubbles at certain screen sizes. Also I would suggest making a margin that way the bubbles do not interfere with one another.

For mobile devices you need to implement the @media screen to enable custom css for mobile devices. An example of this would be:

@media screen and (max-width: 600px) {
 .aClassforSmallScreens {
      clear: both;
  font-size: 1.3em;
 }
}

You should try using percentages on values 具有 width and height instead of pixels because the a percent value is dependent upon screen size and the element that contains it. So for your css code I would suggest should look like this:

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

The width percentage value would enable you to keep the bubbles at certain screen sizes. Also I would suggest making a margin that way the bubbles do not interfere 具有 one another.

移动设备需要实现“媒体屏幕,使移动设备的自定义CSS。这将是一个例子:

@media screen and (max-width: 600px) {
 .aClassforSmallScreens {
      clear: both;
  font-size: 1.3em;
 }
}
answer2: 回答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.

你的问题是基于HTML结构。

每个<;div class=“b-home“>;<;/ DIV >;应一个儿子一个<;离子选项卡标题=…元。

Then change your CSS 具有

.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;
}

此外,关于宽度和高度,具有固定宽度的高度将解决内容重叠其他内容时,页面大小变化。更好的使用一% addapt页面高度&;宽度。

css  css3  ionic-framework  ionic