<span> 并排放置项目

Question

我正在尝试创建一个带有图标的侧边栏div和一个并排显示图像和文本的"顶行"div。侧边栏还可以，但我的第一行显示的是"h1"one_answers"h3"上面的图像。依次，h1和h3并排显示。

html的正文：

<div class="top-row">
<span>
<img class='fotoPerfil' src="images/foto.jpg" alt="">
</span>
<span>
<h1>algum texto</h1>
</span>
<span>
<h3>barra de progresso</h3>
</span>
</div>
<!-- -->
<div class="sidebar">
<ul>
<li><a href="index.html"><img class='botaoMenu' src="images/home.png" alt=""></a></li>
<li><a href="perfil.html"><img class='botaoMenu' src="images/conta.png" alt=""></a></li>
<li><a href="settings.html"><img class='botaoMenuFundo' src="images/engrenagem.png" alt=""></a></li>
</ul>
</div>

和css：

body {
background-color: #FCFCFC;
font: 12px Verdana, sans-serif;
}

.top-row {
position: absolute;
top: 0;
left: 12%;
right: 0%;
height: 12%;
margin: auto;
}
.top-row span {
display: inline-block;
}
.sidebar{
position: absolute;
top: 0;
left: 0;
float: left;
background-color: #EAF6F6;
width: 11%;
height: auto;
border-style: groove;
}

.botaoMenu {
max-height: 80%;
max-width: 80%;
width: auto;
height: auto;
border: none;
}

.botaoMenuFundo {
max-height: 80%;
max-width: 80%;
width: auto;
height: auto;
border: none;
padding-top: 200%;
}

.fotoPerfil {
border-radius: 100%
max-height:10%;
max-width:10%;
width: auto;
height: auto;
}

它怎么了？

Answer 1

您正在.fotoPerfil内设置10%的最大宽度，因此它将计算其所处跨度的10%。

如果您希望配置文件图片占据顶部条形宽度的10%，则可以将max-width: 10%设置为包含图像的跨度。

为了可视化这些问题，你可以使用Right click -> inspect element，或者只为每个对象添加背景色，直到你发现是什么占用了所有的空间。

标题之所以显示在图像下方，是因为图像(实际上是它所在的跨度(太宽了，占据了顶部栏的第一行，将其他元素推到了第二行。

应该这样做：

.fotoPerfil {
border-radius: 100%;
max-width:100%;
}
.fotoPerfilContainer {
max-width:10%;
}

我不确定你在没有看到所有图像的情况下想要实现什么，但通常将宽度和高度设置为整个屏幕的百分比，最终会产生奇怪的结果，在不同的浏览器大小下会膨胀或收缩过多。