Question

.headerDesc {
    width: 100% + 1px;
    height: 70px;
    background-color: #4d2765;
    margin: 0 -8px;    
}
.headerDesc span {
    padding: 5px;  
    position: absolute;    
    color: white;
    font-family: 'Arial', sans-serif;
    text-align: justify;    
    letter-spacing: 1px;
}

<div class="headerDesc">
    <span><strong>A ciência do raciocínio lógico e abstrato, que estuda quantidades, medidas, espaços, estruturas, variações e estatísticas</strong></span>
</div>

我想知道如何将div高度调整为跨度的

我将div高度设置为70px，因为在我的手机上跨度被包裹在3行中，但是在其他手机上，行可以被包裹在2行中，因此div将比跨度大。

Answer 1

如果从div中删除高度和宽度，并从跨度中取出绝对位置，则会得到所需的结果。

.headerDesc {
    background-color: #4d2765;
    margin: 0 -8px;    
}
.headerDesc span {
    padding: 5px;  
    color: white;
    font-family: 'Arial', sans-serif;
    letter-spacing: 1px;
}

如果要更改其他设备上的样式，则应使用media queries。通常，使用height属性是个坏主意。

Answer 2

您的意思是这样我刚刚将背景颜色从.headerDesc > span添加到.headerDesc

* {
    margin: 0;
}
.headerDesc span {
    padding: 5px;  
    position: absolute;    
    color: white;
    font-family: 'Arial', sans-serif;
    text-align: justify;    
    letter-spacing: 1px;
    background-color: #4d2765;
}

<div class="headerDesc">
    <span><strong>A ciência do raciocínio lógic saveo e abstrato, que estuda quantidades, medidas, espaços, estruturas, variações e estatísticas</strong></span>
</div>

Answer 3

使用显示属性inline-block并设置height来继承span的高度将与div元素的高度相同。

    .headerDesc {
    height: 70px;
    background-color: #4d2765;
    margin: 0 -8px;    
}
.headerDesc span {
    display : inline-block;
    heigh : inherit;
    padding: 5px;  
    position: absolute;    
    color: white;
    font-family: 'Arial', sans-serif;
    text-align: justify;    
    letter-spacing: 1px;
}

如何将div高度调整为跨度高度

3 个答案: