Question

我无法为我的生活弄清楚这一点。

我有两个DIV堆叠在一起，每个DIV都有一个图像，它们也堆叠在一起，形成一个两部分的标志。它在Chrome和Safari上工作正常，但出于某种原因，底部图像向右碰撞。

几乎就像文本换行一样，但我无法弄清楚为什么会这样，因为Firefox没有理由认为这些图像是重叠的。

我整个下午一直在努力，但无法找到解决方案，所以提前感谢您的帮助。

相关CSS：

    #top_blue {
       background: rgb(34,59,141);
       width: 100%;
       height: 80px;
   }

   #top_green {
       background: rgb(10,128,55);
       width: 100%;
       height: 47px;
   }

   #top_blue img, #top_green img {
       width: 258px;
   }

   .imgholder1, .imgholder2 {
       margin-left: 20%;
       float: left;
       overflow: hidden;
   }

Answer 1

将以下内容添加到.imageholder1, .imageholder2

的css中

clear: left;

顺便说一下，漂亮的明星！

Answer 2

在position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);上将高度更改为81px可以解决我在Firefox中的问题。

Answer 3

添加：

txtDay

Answer 4

你需要：

一个容器;
clearfix;
正确使用花车和边距;
完整的徽标而不是划分（给我完整的图像，我会给你css）

HTML：

<header class='block'>

  <top class='block'>
    <div class='container clearfix'>
      <div id='logo'>&nbsp;</div>
    </div>
  </top>

  <nav class='block'>
    <div class='container'>
      <ul class='clearfix'>
        <li><a href=''>Home</a></li>
        <li><a href=''>About</a></li>
        <li><a href=''>Endorsements</a></li>
        <li><a href=''>Contribute</a></li>
        <li><a href=''>Contact</a></li>
      </ul>
    </div>
  </nav>

</header>

<main>
  <div class='container'>
    <div class='red'>some text here</div>
  </div>
</main>

CSS：

*
{
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

li
{
  list-style: none;
}

.red
{
  background: red;
}

.container
{
  max-width: 800px;
  margin: auto;
}

.block
{
  width: 100%;
  display: block;
}

.clearfix
{
  display: block;
}

.clearfix::before, 
.clearfix::after
{
  content: " ";
  display: block;
  width: 100%;
  clear: both;
}

top
{
  background: blue;
}

top #logo
{
  height: 200px;
  width: 500px;
  float: left;
}


nav
{
  background: green;
}

nav ul {
  float: right;
}
nav ul li{
  float: left;
}

nav ul li a
{
  display: block;
  padding: 10px 20px;
}

为了这个标志：

如果徽标的高度为200px且导航高度为50px，则顶部的高度必须为150px（固定并在.css中声明的高度）。通过这种方式，徽标将位于导航栏上，但位于标签内。

jsfiddle：https://jsfiddle.net/michmammo93/h8r27oq4/

Firefox会使垂直相邻的图像碰到一边

4 个答案: