I have been looking everywhere for help on this issue with Css layout width I have been running into.
Whenever I float a div to the right its width won't automatically adjust to the total width of its children. I have observed this effect on all common browsers (Firefox, Chrome and IE11/Edge). What happens is that the last child will just be displayed bellow all the others which is what I do not want.
Here is the css and html I have been using.
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&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;
}
*
And my issue is with the div "#admin-container".
How do I fix this so as to make that div auto adjust to the correct width and display without breaking its children elements?
Cheers and thank you.
EDIT: I have editted the code as asked by @Dzijeus. As I have commented, the images don't matter for the issue. My issue is with why the width won't auto adjust on the '#admin-container' to fit all its children.
答案 0 :(得分：1)
感谢您更新代码，它更好，但仍远不是最低限度可验证的示例。最小的例子是当您在仍然重现问题的同时从代码中尽可能多地剥离时。
在你的情况下，如果你做过这个练习，你可能会遇到这样的事情：
for (int jj = 0; jj < 4; ++jj)
{
const int idx = y - 1 + jj;
float a0 = get_subpixel(src, dest_width, dest_height, x, idx);
float d0 = get_subpixel(src, dest_width, dest_height, x - 1, idx) - a0;
float d2 = get_subpixel(src, dest_width, dest_height, x + 1, idx) - a0;
float d3 = get_subpixel(src, dest_width, dest_height, x + 2, idx) - a0;
float a1 = -(1.0f / 3.0f) * d0 + d2 - (1.0f / 6.0f) * d3;
float a2 = 0.5f * d0 + 0.5f * d2;
float a3 = -(1.0f / 6.0f) * d0 - 0.5f * d2 + (1.0f / 6.0f) * d3;
C[jj] = a0 + a1 * dx + a2 * dx2 + a3 * dx3;
// } // end jj
d0 = C[0] - C[1];
d2 = C[2] - C[1];
d3 = C[3] - C[1];
a0 = C[1];
a1 = -(1.0f / 3.0f) * d0 + d2 - (1.0f / 6.0f) * d3;
a2 = 0.5f * d0 + 0.5f * d2;
a3 = -(1.0f / 6.0f) * d0 - 0.5f * d2 + (1.0f / 6.0f) * d3;
(*dest)[i * dest_height + j] = saturate(a0 + a1 * dy + a2 * dy2 + a3 * dy3, max_bit);
} // end jj move his above
}
}
你会立即看到这样做的兴趣，并解决了这个问题。因为从这里开始，很容易发现问题来自于使用相对填充。切换到例如<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