Question

结帐this fiddle，我有1 parent div和2 child divs with select box。在第二个选择框中，4th option具有冗长的名称，导致孩子离开parent div。如何扩展父div以使子div始终位于其中并且不会超出绿线（图例）？

Answer 1

您需要删除所有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;
}

Answer 2

我使用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

您可以更改窗口大小，选择区域将会扩展。

根据子div的宽度扩展父div

2 个答案: