根據子div的寬度擴展父div

檢查出this fiddle，我有1 parent div和2 child divs with select box。在第二個選擇框中，4th option名稱很長，導致孩子離開parent div。如何擴展父div，使子div始終位於其中，並且不會離開（傳奇）的綠線？根據子div的寬度擴展父div

來源

2013-07-08 Chankey Pathak

溢出：hidden/scroll？ – FSou1

不，它不應該通過overflow：scroll來滾動。它應該充分擴展而不需要卷軸，並且父分區應該根據它進行擴展。 –

您需要刪除所有floats並使用display:table-cell;來實現此目的。

這裏是WORKING SOLUTION

驗證碼：

#form{ 
margin: 3px 10px 10px 10px; 
padding: 10px 10px 10px 10px; 
    display:table; 
} 
#form fieldset { border:1px solid green; padding:5px 5px 5px 5px; } 
#form legend { 
    padding: 0.2em 0.5em; 
    border:1px solid green; 
    color:green; 
    font-size:120%; 
/*text-align:right;* works only in chrome so commenting it, using legend align=right instead */ 
    } 
#form label { 
    float: left; 
    width:45%; 
    margin-right:0.5em; 
    /*padding-top:0.05em;*/ 
    text-align:left; 
    } 
    #form span{ 
    color: red; 
    } 
    input select{ 
    width: 35mm; 
    } 


#column1-wrap{ 
    display:table-cell; 
    vertical-align:top; 
} 
#column1{ 

} 
#column2{ 
    display:table-cell; 
    width: 200px; 

} 
#column1-wrap2{ 
    margin-right:100px; 
} 
#clear{ 
    clear: both; 
}

來源

2013-07-08 09:54:41 Nitesh

我使用inline-block的實現。

你可以試試這個：

HTML：

<body onload="restart_capabilities_documents_lists();"> 
    <div id="form"> 
    <fieldset> 
     <div>Title</div> 
     <form name="manual_permissions" action="something" method="POST"> 
     <input type="checkbox" name="chk_create_manual" value="1" =""> 
     Create new manual<br> 

     <input type="checkbox" name="chk_edit_manual_properties" value="1" =""> 
     Edit manual properties<br> 
     <input type="checkbox" name="chk_change_manual_permissions" value="1" =""> 
     Change manual permissions<br> 
     <hr> 

     <div class="webiso_ui_subtitle">Permissions of appro_pp per document</div> 
     <div id="float_right"><a    href="javascript:restart_capabilities_documents_lists()" class="webiso_ui_button5">Reset</a></div>   
     <div id="column1-wrap"> 
     <div id="column1"> 
      <select name="capabilities" multiple="multiple" size="8"> 
      <option value="0">Edit</option> 
      <option value="1">Move</option> 
      <option value="2">Delete</option>     
      </select> 
      </div> 
      </div> 
    <div id="column2"><select name="documents" onchange="fix_selects()" multiple="multiple" style="auto" size="28" id="something"> 
     <!-- <div style="overflow-x: auto; overflow-y:scroll;;"> --> 
      <!-- <select name="documents" multiple size=10 onChange="fix_selects()"> --> 

      <option title="KHB_333 - Opleiding en deskundiheidbevordering" value="24">____KHB_333 - Opleiding en deskundiheidbevordering</option> 

      <option title="KHB_334 - Professioneel handelen" value="25">____KHB_334 - Professioneel handelen</option> 

      <option title="KHB_335 - Alfahelpenden" value="26">____KHB_335 - Alfahelpenden</option> 

      <option title="KHB_34 - Fysieke omgeving en materiaal, middelen, apparatuur en inkoop personeel" value="27">___KHB_34 - Fysieke omgeving en materiaal, middelen, apparatuur en inkoop personeel</option> 


      <option title="KHB_4 - Meten en analyse" value="38">__KHB_4 - Meten en analyse</option> 

      <option title="KHB_41 - Bewaken en meten van processen" value="39">___KHB_41 - Bewaken en meten van processen</option> 

      <option title="KHB_42 - Klant- en medewerkersraadplegingen" value="40">___KHB_42 - Klant- en medewerkersraadplegingen</option> 

      <option title="KHB_43 - Afwijkingen van de zorg" value="41">___KHB_43 - Afwijkingen van de zorg</option> 

      <option title="KHB_44 - Melding incidenten patiënten" value="42">___KHB_44 - Melding incidenten patiënten</option> 

      <option title="KHB_45 - Afhandeling van klachten" value="43">___KHB_45 - Afhandeling van klachten</option> 


      <option title="KHB_51 - Corrigerende en preventieve maatregelen" value="47">___KHB_51 - Corrigerende en preventieve maatregelen</option> 

      <option title="KHB_52 - Systeembeoordeling" value="48">___KHB_52 - Systeembeoordeling</option> 

      <option title="PRO - Overzicht van de procedures" value="49">_PRO - Overzicht van de procedures</option> 



      </select> 
      <span id="disabled">* Deleted documents</span> 
      </div> 
      <div id="clear"></div>

復位更新

CSS：

#form{ 
margin: 3px 10px 10px 10px; 
padding: 10px 10px 10px 10px; 
} 
#form fieldset { border:1px solid green; padding:5px 5px 5px 5px; } 
#form legend { 
padding: 0.2em 0.5em; 
border:1px solid green; 
color:green;CSS 

font-size:120%; 
/*text-align:right;* works only in chrome so commenting it, using legend align=right  instead */ 
    } 
#form label { 
    float: left; 
    width:45%; 
    margin-right:0.5em; 
    /*padding-top:0.05em;*/ 
    text-align:left; 
    } 
    #form span{ 
    color: red; 
    } 
    input select{ 
    width: 35mm; 
    } 


#column1-wrap{ 
display: inline-block; 
    width: 30%; 
} 
#column1{ 

} 
#column1 > select{ 
    width: 100%; 
} 
#column2{ 
display: inline-block; 
width: 68%; 
vertical-align: top; 
} 
#column2>select{ 
    width:100%; 
} 
#column1-wrap2{ 

} 
#clear{ 
    clear: both; 
}

你可以試試這個demo

你可以改變窗口大小和選擇區域將擴大。

來源

2013-07-08 10:05:42 Chickenrice

很好有一個替代解決方案，謝謝。 –

根據子div的寬度擴展父div

回答

相關問題