Question

<div class="widget-header">
    <span class="widget-title">
        Widget 1
    </span>
    <span class="widget-menu">
        <span class="btn change-col">
           To Main
        </span>
    </span>
</div>

鉴于上面的html，我希望span.widget-title和span.widget-menu内嵌widget-title左对齐和widget-menu右对齐。目前，我有以下css：

.widget-header {
    position: relative;
    background-color: orange;
    border-radius: 5px;
}

.widget-title { 
    width: 30%;
    position: absolute;
    top: 0px;
    left: 0px;
}

.widget-menu {  
    width: 50%;
    /*position: absolute;
    top: 0px;
    right: 5px;*/
}

注意.widget-menu的注释部分。如果我启用它，那么视图“翻转”并且widget-header完全消失。为什么会发生这种情况，以及定位这些标签的最佳方式是什么，以便风格可维护并能够适应未来的变化？

提前致谢。

Answer 1

'翻转'发生是因为父div没有宽度或高度，因为它的span子区域具有绝对位置。要解决这个问题，你可以给div一个固定的高度

.widget-header{ 
    height:50px; 
    width:500px; 
}

示例： http://jsfiddle.net/dGrLh/2/

或者漂移跨度而不是绝对位置，如：

.widget-title { 
    width: 30%;
    float:left;
}

.widget-menu { 
    float:right;
}

示例： http://jsfiddle.net/dGrLh/1/

在div祖先中定位内联span标签

1 个答案: