根据子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

回答

相关问题