带有浮动右断开子项的div

João Rebelo 发表于 Dev

若昂·雷贝洛（JoãoRebelo）

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

每当我将div浮动到右侧时，其宽度都不会自动调整为其子级的总宽度。我已经在所有常见的浏览器（Firefox，Chrome和IE11 / Edge）上观察到了这种影响。发生的是，最后一个孩子只会在所有其他人的下面被显示，这是我所不希望的。

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

    *

<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'上自动调整以适合其所有子项。

耶稣

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

就您而言，如果您完成了练习，则可能会遇到以下情况：

<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，现在显示如您所愿。

通常，填充和边距不适用于内联元素，例如span。要应用填充或边距，您应该使用display: block或display: inline-block

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。