Question

我有以下HTML标记：

<div id="PlanViewControls" class="ui-widget ui-state-default ui-corner-all" >
    <div id="Level1Controls">
        <div class="separated">
            <div id="PlanViewZoomSlider"></div>
        </div>
        <div class="separator">|</div>
        <div class="separated">
            <label>
                Rack Info: 
                <select id="RackInfoSelect">
                    <option value="Name">Name</option>
                </select>
            </label>
        </div>
        <div class="separator">|</div>
        <div class="separated marginedTop">
            <label>
                Enable Auto-Refresh:
                <input id="PlanViewRefreshCheckbox" name="Enable Auto-Refresh" value="value" type="checkbox" />
            </label>
        </div>        
    </div>
    <div id="Level2Controls">
        <div class="separated">
            <label>
                Levels To Display:
                <select id="LevelSelect">
                    <option value="All">All</option>
                </select>
            </label>
        </div>
        <div class="separator">|</div>
        <div class="separated marginedTop">
            <a id="ExportPlanView" href="javascript:void(0)" target="_blank" title="Export the plan view as a pdf.">
                <span class="cs-icon cs-icon-edit-search-results" style="float: left; margin-right: 5px;"></span>
                <label id="ExportLabel">Export</label>
            </a>
        </div>
    </div>
</div>

CSS（用于主要样式的最新jQueryUI）

#RightPaneContent
{
    overflow: hidden;
}

#PlanViewControls
{
    display: none;
    min-height: 20px;
    margin-bottom: 5px;
}

#PlanViewControls > div
{
    min-height: 20px;
    padding-top: 5px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 5px;
}

.component-slider
{
    width: 100px;
    margin-left: 5px; 
    margin-top: 3px;
}

#PlanViewControls label
{
    display: block;
    padding-left: 15px;
    text-indent: -15px;
    float: left;
}

#PlanViewControls input 
{    
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
}

#PlanViewControls div.separator
{
    padding-top: 4px;
}

.marginedTop
{
    margin-top: 3px;
}

#ExportLabel
{
    padding-top: 1px;
}

#PlanViewControls
{
    min-width: 700px;
}

#ExportLabel:hover
{
    cursor: pointer;
}

#PlanViewControlsOverlay
{
    background: white;
    opacity: 0.7;
    filter: alpha(opacity=70);
    position: absolute;
    z-index: 10001;
}

我真的对这个解决方案不满意，因为在宽屏显示器上，第二级控件看起来不自然 - 有足够的空间将它们全部保存在一个层面上。

我目前的解决方案包括：

测量我想要占用的空间的可用宽度。
测量我拥有的每个控件的宽度。
在第一行放置尽可能多的控件。
如果我的空间不足，请附加第二级。

显然，每行只折叠1个项目是没有意义的 - 我会指定我的第一级控件的最小宽度。

这是正确的方法吗？或者有一种简单的方法来表达这个使用CSS / HTML吗？

就像一个视觉助手一样，我已经在风景监视器和人像监视器下面附着了我的页面。

enter image description here

Answer 1

嗯，我会使用纯CSS：

<div id="controls">
 <div> "Separated" </div>
 <div> another control </div>
 <div> and one with an icon </div>
 ...
</div>

#controls {
    width: 100%;
    min-width: 10em; /* or whatever */
    /* implicit height: auto; */
    overflow: hidden; /* to hide the leftmost borders */
}
#controls > div {
    display: inline-block;
    border-left: 1px solid blue;
    padding: 1em 0;
    margin: 1em -1px; /* move the borders 1px into the off */
 }

这应该是一个可扩展的工具栏，不需要不同的level-div。

在不使用广泛的javascript的情况下很好地打破另一个div？

1 个答案: