Question

我的英语很糟糕..我有2个盒子，一个在左下角，另一个在右下角，两个都有位置：绝对和底部：0px;。当我把窗口缩小时，它们重叠......但是它们应该低于对方（没有得到任何代码）。尝试最大宽度，但我猜“poition：绝对;”摧毁它。

    <body>
    <div id="nav">
        <p><a href="">MUSIC</a> &nbsp;&nbsp;
        <a href="">RADIO & LIVE CHAT</a> &nbsp;&nbsp;
        <a href="">SHOP</a> &nbsp;&nbsp;
        <a href="">COMMUNITY</a> &nbsp;&nbsp;
        <a href="">SUBMIT</a> &nbsp;&nbsp;
        <a href="">CONTACT</a></p>
    </div>
    <div id="iconrow">
        <a href="">
            <img src="../bilder/youtube.png" class="iconrow"/>
        </a>
        <a href="">
            <img src="../bilder/soundcloud.png" class="iconrow"/>
        </a>
        <a href="">
            <img src="../bilder/spotify.png" class="iconrow"/>
        </a>
    </div>
</body>
#nav {
font-family:Typograph;
position: absolute;
bottom: 0px;
right: 0px;
padding: 0px 40px 10px 0px;
font-size: 18px;}
#iconrow {
position:absolute;
bottom: 0px;}
.iconrow {
width:50px;
float:left;
padding: 0px 0px 25px 20px;}

Answer 1

绝对位置将完全阻止您实现这一目标。您需要的是两个宽度为50％的盒子，浮动（例如向左），然后是一个媒体查询，在特定的屏幕尺寸下将盒子的宽度调整为100％。

Answer 2

使用媒体查询，定义#icon-row的高度，并将该高度值指定为bottom #nav。#nav { font-family: Typograph; position: absolute; bottom: 0px; right: 0px; padding: 0px 40px 10px 0px; font-size: 18px; } #iconrow { position: absolute; bottom: 0px; height: 70px; } .iconrow { width: 50px; float: left; padding: 0px 0px 25px 20px; } @media screen and (max-width: 700px) { #nav, #iconrow { width: 100%; text-align: center; } #nav { bottom: 70px; left: 0px; padding: 0px 10px 0px 10px; } .iconrow { float: none; }。还有一些其他细节 - 请参阅我的代码段。

＆＃13;

<body>
  <div id="nav">
    <p><a href="">MUSIC</a> &nbsp;&nbsp;
      <a href="">RADIO & LIVE CHAT</a> &nbsp;&nbsp;
      <a href="">SHOP</a> &nbsp;&nbsp;
      <a href="">COMMUNITY</a> &nbsp;&nbsp;
      <a href="">SUBMIT</a> &nbsp;&nbsp;
      <a href="">CONTACT</a></p>
  </div>
  <div id="iconrow">
    <a href="">
      <img src="../bilder/youtube.png" class="iconrow" />
    </a>
    <a href="">
      <img src="../bilder/soundcloud.png" class="iconrow" />
    </a>
    <a href="">
      <img src="../bilder/spotify.png" class="iconrow" />
    </a>
  </div>
</body>

＆＃13;

{{1}}

＆＃13;

2个绝对盒子彼此相同..？

2 个答案: