Разбивать красиво в дополнительный div без использования обширного JavaScript?

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?

Так же, как визуальный помощник, я прикрепил ниже то, как выглядит моя страница на мониторе с альбомной ориентацией, а не на портретном мониторе.

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 */
 }

Это должно дать масштабируемую панель инструментов, и нет необходимости в различных делениях уровня.