div with float sağa akan çocuklar

Question

Bu konu hakkında Css düzeni genişliği ile çalışıyorum her yerde arıyorum.

Her ne zaman sağda bir div yüzdüğümde, genişliği otomatik olarak çocuklarının toplam genişliğine ayarlanmaz. Bu etkiyi tüm yaygın tarayıcılarda (Firefox, Chrome ve IE11/Edge) gözlemledim. Olan şey şu ki, son çocuk sadece gösterilmeyecek, diğerleri istemediğim şeydir.

Kullanmakta olduğum css ve html işte burada.

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; 
} 

Ve konu div "# admin-konteyner" beraberdir.

Bu div otomatik olarak doğru genişlik ayarını yapmak ve alt öğelerini bozmadan görüntülemek için bunu nasıl düzeltirim?

Şerefe ve teşekkür ederim.

EDIT: @Dzijeus tarafından istenen kodu düzenledim. Yorum ettiğim gibi, görüntüler konu için önemli değil. Sorunum, genişliğinin neden tüm çocuğa sığacak şekilde '# admin-container' üzerinde otomatik olarak ayarlanmayacağıyla ilgili.

Answer 1

Kodu güncellediğiniz için teşekkürler, daha iyi, ancak hala minimum doğrulanabilir bir örnekten uzaktı. En azından bir örnek, kodu yeniden üretirken problemi tekrar üretirken olabildiğince fazla şerit oluşturduğunuzda ortaya çıkar. Eğer egzersiz yapmış olsaydınız durumda

, muhtemelen böyle bir şey gelmiş olacaktır:

<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; 
} 

Ve hemen bunu yapmanın ilgi görmüş olur, VE sorunu çözdü. Çünkü buradan, sorunun göreceli bir dolgu kullanmaktan geldiğini fark etmek kolaydır. Örneğin padding-right: 2px'a geçin ve ekran beklediğiniz gibi.

Genel kural olarak, dolgu ve kenar boşluğu span gibi satır içi öğeler için geçerli değildir. Dolgu veya kenar boşluğu uygulamak için display: block veya display: inline-block