Ломать красиво в дополнительный 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 */ 
} 

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