Question

我的桌子里面有一个div。 div的宽度是全宽的，但每当我调整屏幕大小时，div会减小其大小，然后其内容将与div重叠。

现在，我希望基于内容（表）的div的最小宽度。我的主要内容是 class =“search”。 这是我的代码的链接：

.search {
  border: 2px solid #FDBF3B;
  background-color: #FFEBC1;
  padding: 10px;
  margin: 5px 0;
}

.search table {
  border: none;
}

.search .header {
  margin-bottom: 5px;
  border-bottom: 1px solid #FDBF3B;
  padding-bottom: 2px;
  color: #000F1F;
  font-weight: bold;
  overflow: hidden;
}

.search .buttons {
  margin-top: 5px;
  border-top: 1px solid #FDBF3B;
  padding-top: 8px;
  white-space: nowrap;
}

.inner {
  padding: 7px;
  min-height: 480px;
  z-index: 1;
  overflow: auto;
}

<DIV class=inner>
  <DIV class=search sizset="false" sizcache017720493147691946="40 33 1">
    <DIV class=header>Search Options </DIV>
    <TABLE sizset="false" sizcache017720493147691946="40 33 1">
      <TBODY sizset="false" sizcache017720493147691946="40 33 1">
        <TR>
          <TD></TD>
          <TD class=LABEL>
            <SPAN id=LBL_NAME>Name:</SPAN>
          </TD>
          <TD>
            <INPUT name=NAME style="BACKGROUND-COLOR: #ffffff" type=text size=15 maxLength=10 data-dpmaxz-eid="4">
          </TD>
        </TR>
        <TR>
          <TD></TD>
          <TD class=LABEL>
            <SPAN id=LBL_ADDRESS>Address:</SPAN>
          </TD>
          <TD>
            <INPUT name=ADDRESS style="BACKGROUND-COLOR: #ffffff" type=text size=40 maxLength=50 data-dpmaxz-eid="5"> </TD>
        </TR>
      </TBODY>
    </TABLE>
    <DIV class=buttons>
      <INPUT name=SEARCH class=BUTTON type=button value=Search>
      <INPUT name=SEARCH class=BUTTON type=button value=Clear>
      <INPUT name=CREATE class=BUTTON type=button value=Create> </DIV>
  </DIV>
</DIV>

Answer 1

将min-width应用于父div并管理body中的溢出。每当你减少widnow宽度较小然后搜索div的宽度时，将会有一个滚动体。

    .body{
       overflow: scroll;
    }
    .search {
       min-width:380px;
    }

如何根据其内容制作div最小宽度

1 个答案: