Question

尝试创建一个横跨屏幕页脚的栏，其中80％填充纯白色，20％透明，其中有2个社交媒体图标。

然而，我尝试以100％创建一个条形，然后将80％和20％的两个元素连续失败。这两个元素是浮动的：left和white-space设置为nowrap。

我试图做显示：inline-block;但最终推动了酒吧中的一个元素大约10px。

任何人都知道如何实现这一目标，以便在页面缩小到一定大小然后最终包装之前它会保持不变大小？目前它唯一可以保留的方式是浏览器的宽度为1,100像素宽。如果你进入下面，其中一个社交媒体图标会被隐藏在屏幕的右侧（这......不应该发生......但是......）

＆＃13;

    footer .logo-container .logo {
      float: right;
    }
    footer .contact-container .white-bar {
      background: #fff;
    }
    footer div.contact-info {
      float: left;
      width: 85%;
    }
    footer div.social-media {
      white-space: nowrap;
    }
    footer div.social-media ul {
      list-style-type: none;
    }
    footer div.social-media ul li {
      display: inline-block;
      margin-left: 15px;
    }

＆＃13;

<footer>
  <div class="logo-container">
    <div class="logo">
      <img src="http://placehold.it/250x250" />
    </div>
    <div class="clear"></div>
  </div>
  <div class="contact-container">
    <div class="contact-info white-bar">
      Phone Here | Address Here
    </div>
    <div class="social-media">
      <ul>
        <li>
          <img src="http://placehold.it/68x40" />
        </li>
        <li>
          <img src="http://placehold.it/71x40" />
        </li>
      </ul>
    </div>
  </div>
</footer>

＆＃13;

全宽条纹部分填充纯色CSS

0 个答案: