html - div with float right breaking children

Question

我一直在到处寻找有关我遇到的 Css 布局宽度问题的帮助。

每当我向右浮动一个 div 时，它的宽度不会自动调整到其子项的总宽度。我在所有常见浏览器(Firefox、Chrome 和 IE11/Edge)上都观察到了这种效果。结果是最后一个 child 将显示在所有其他 child 的下面，这是我不想要的。

这是我一直在使用的 css 和 html。

https://jsfiddle.net/xqpf9s95/2/

    *

<div id="header-container">
        <div id="header-top-container">

          <div id="header-logo">
            <a href="/GlobalImagens/pages/imagens.xhtml?categoria=ultima-hora">
              <img src="../resources/images/logo_globalimagens.jpg" alt="Global Imagens"></a>
          </div>

          <div class="header-top-right-corner">
            <form id="language" name="language" method="post" action="/GlobalImagens/pages/imagens.xhtml" enctype="application/x-www-form-urlencoded">
              <input name="language" value="language" type="hidden">

              <div id="newsletter" class="newsletter">
                <a href="http://72.e-goi.com/w/Te1LetVmefgyM9g90LOh" target="_blank" style="font-size: 10px;">Subscrever Newsletter</a>
              </div>

              <div style="float: right; padding-left: 6%;">
                <script type="text/javascript" src="/GlobalImagens/javax.faces.resource/jsf.js.xhtml?ln=javax.faces&amp;stage=Development"></script>
                <a href="#" style="text-decoration:none; " onclick="mojarra.jsfcljs(document.getElementById('language'),{'language:j_idt31':'language:j_idt31','localeCode':'en'},'');return false">
                  <img src="../resources/images/flag_uk.jpg" border="0"></a>
              </div>

              <div style="float: right;">
                <a href="#" style="text-decoration:none;" onclick="mojarra.jsfcljs(document.getElementById('language'),{'language:j_idt35':'language:j_idt35','localeCode':'pt'},'');return false">
                  <img src="../resources/images/flag_pt.jpg" border="0"></a>
              </div>
              <input name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="215900126811062761:3093351618596041247" autocomplete="off" type="hidden">
            </form>
          </div>

          <div id="admin-container">

            <div>
              <span class="admin-menu1" style="padding-left: 1.5%;"><a href="/GlobalImagens/pages/entrar.xhtml" title="Iniciar Sessão">Iniciar Sessão</a>
                        </span>
              <span class="dotted-separator"></span>
              <span style="padding-left: 1.5%;"><a href="/GlobalImagens/pages/registo.xhtml" title="Registo">Registo</a>
                        </span>

              <span class="admin-menu3"><a href="/GlobalImagens/pages/entrar.xhtml">
                            <img src="../resources/images/bt_minhaconta.jpg" title="A Minha conta" alt="A Minha conta"></a>
                    </span>
              <span class="dotted-separator"></span>
              <span class="admin-menu4"><a href="/GlobalImagens/pages/entrar.xhtml">
                            <img src="../resources/images/bt_carrinho.jpg" title="Meu carrinho" alt="Meu carrinho"></a>
                    </span>
            </div>
            <div>

              <div align="right">
                <span style="color: #83266f; padding-right: 5px;">Não pode adquirir imagens</span><a href="/GlobalImagens/pages/consumos.xhtml" style="color:#83266f;" title="detalhes">(detalhes)</a>
              </div>

            </div>
          </div>

        </div>
    /*tables header*/
.admin-menu1 {
  padding-right: 1.5%;
}
.dotted-separator {
  border: none;
  border-left: 1px dotted #83256f;
  color: #fff;
  /*   background-color:#dadada;
  height:17px;
  width:0%;
  margin: 0%; */
}
.admin-menu2 {
  padding-left: 10px;
  background: url(../images/background_dot.jpg) no-repeat right;
}
.admin-menu-logged-in-3 {
  padding-left: 1.5%;
}
.admin-menu3 {
  /* width: 75px; */
}
.admin-menu4 {
  /*    width: 28px; */
}
/*******************************HEADER*******************************/
#header-container {
  /* height: 180px; */
  /* float: left; */
}
#header-top-container {
  /*    width: 983px; */
  /* height: 100px; */
  /* float: left; */
}
#header-logo {
  padding-top: 1%;
  float: left;
}
#header-logo img {
  border: none;
  border-style: none;
}
.newsletter {
  float: left;
  padding-top: 1%;
}
.header-top-right-corner {
  float: right;
  padding-top: 1%;
  width: 11%;
}
#admin-container {
  padding-top: 1%;
  font-size: 10px;
  clear: right;
  float: right;
  box-sizing: border-box;
}
#admin-container a {
  text-decoration: none;
  color: #493641;
}
#admin-container a:hover {
  text-decoration: underline;
}

*

我的问题是 div“#admin-container”。

我该如何解决这个问题，以便在不破坏其子元素的情况下使该 div 自动调整到正确的宽度并显示？

干杯，谢谢。

编辑:我已经按照@Dzijeus 的要求编辑了代码。正如我所评论的那样，图像与问题无关。我的问题是为什么宽度不会在“#admin-container”上自动调整以适合其所有子项。

Answer 1

感谢您更新代码，它更好了，但离最小的可验证示例还很远。一个最小的例子是，当您从代码中尽可能多地剥离，同时仍然重现问题时。

在你的情况下，如果你完成了这个练习，你可能会得到这样的结果:

<div id="admin-container">
      <span class="admin-menu1">Iniciar Sessão</span>
      <span>Registo</span>
      <span>A Minha conta</span>
      <span>Meu carrinho</span>
</div>

.admin-menu1 {
  padding-right: 1.5%;
}

#admin-container {
  clear: right;
  float: right;
}

您会立即看到这样做的好处，并解决了问题。因为从这里，很容易注意到问题来自于使用相对填充。切换到例如 padding-right: 2px，现在显示如您所愿。

作为一般规则，padding 和 margin 不适用于 span 等内联元素。要应用填充或边距，您应该使用 display: block 或 display: inline-block