时间戳

首页 > 解决方案 > 如何根据其内容制作 div 最小宽度

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

问题描述

我有一个里面有桌子的 div。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>

标签： javascriptjqueryhtmlcss

解决方案

将最小宽度应用于父 div 并管理正文中的溢出。每当您将 widnow 宽度减小到小于搜索 div 的宽度时，都会在正文中滚动。

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

推荐阅读