我目前正在开发以下界面:
当用户点击公式时,窗格向下滑动以显示公式构建器(尚未实现),如下所示:
我想将此窗格从最左侧扩展到最右侧。当我试图使用position: absolute; left: 0; right: 0;
时,它会伸展,但它下方的元素不会向下滑动并被掩盖。
如何让元素向左和向右延伸并使下面的元素不被覆盖?
<div class="editor-label">
<label for="Calculator_Formula">Formula:</label>
</div>
<div class="editor-field">
<span class="calculator-formula">
<a href="#" class="solid-link" onclick=" $('.ui-formula-designer').slideDown('slow'); return false; ">(rrb * (currentValue + iv) - (hcv * homestead) - (mcv * military)) * levy</a>
</span>
<span class="field-validation-valid" data-valmsg-for="Calculator.Formula" data-valmsg-replace="true"></span>
<div class="ui-formula-designer-container">
<div class="ui-formula-designer" style="height: 100%; width: 100%; background-color: rgb(68, 68, 68);">
<div class="designer" style="height: 150px;"></div>
<div class="toolbox" style="height: 150px;"></div>
</div>
</div>
</div>
答案 0 :(得分:0)
div 的默认行为可从最左侧延伸到最右侧。
在您的情况下,周围的容器可能会应用一些margin
或padding
。
答案 1 :(得分:0)
我添加了一个新的CSS类.page-width
,其中我放置了不应从左到右拉伸的元素,但是应用了边距。公式设计器未包含在具有该类的<div>
中,因此它会在整个体宽范围内延伸。
试试这个:
你可能需要做一些微调,但你明白了。
答案 2 :(得分:0)
继续发表评论后,首先将其添加到您的标记中:
<div id="content">
<div class="top">
content above the formula builder
</div>
<div class="ui-formula-designer-container">
....formula builder goes here.....
</div>
<div class="bottom">
content below the formula builder
</div>
</div>
从CSS中删除此填充:
#content {
padding: 25px;
}
然后添加此(或您需要的尺寸):
.top, .bottom {
padding: 25px;
}
希望这有帮助。
答案 3 :(得分:0)
使用此link作为参考。我能够通过以下CSS完成此任务:
.ui-formula-designer-container{
position: relative;
}
.ui-formula-designer:before, .ui-formula-designer:after{
content: " ";
width: 100%;
background-color: #444;
position: absolute;
top: 0;
bottom: 0;
}
.ui-formula-designer:before{
left: 100%;
}
.ui-formula-designer:after{
right: 100%;
}