0

看看这个小提琴，我有1 parent div和2 child divs with select box。在第二个选择框中，4th option名称过长导致孩子退出parent div。如何扩展父 div 以使子 div 始终在其中并且不会超出（传说中的）绿线？

4

2 回答 2

2

您需要删除所有的floats并使用display:table-cell;来实现这一点。

这是工作解决方案

编码：

#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-08T09:54:41.483 回答
1

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

你可以试试这个演示

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

于 2013-07-08T10:05:42.723 回答