html - 如何根据内容长度使 DIV 的宽度等于 2 个预设值中的 1 个？

Question

我已将内容动态生成到 DIV 中，需要根据 DIV 中的内容通过两个预设值调整 DIV 宽度。

它应该像这样工作:如果我们有很长的内容 - 宽度应该 = 960px，如果内容很少 - 只需 480px。

所以只有两个值和宽度的两个变化:960px 或 480px。

* {
  box-sizing: border-box;
}

.page-list-img {
  clear: both;
  width: 100px;
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #ddd;
  padding: 5px !important;
  opacity: 1.0;
  transition: opacity 500ms;
}

.page-list-img:hover {
  opacity: 0.5;
  transition: opacity 500ms;
}

.button-page-list-p {
  text-align: left;
}

span.lister {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.page_list_container {
  width: 960px;
  display: flex;
  flex-wrap: wrap;
  background-color: #f2f2f2;
}

.column2 table {
  border: none;
  width: 100%;
  height: 130px;
}

.column2 table td {
  border-style: none !important;
  vertical-align: middle;
}

.column1 {
  text-align: center;
  line-height: 130px;
  float: left;
  width: 150px;
  padding-left: 10px;
  height: 130px;
}

.column2 {
  border-left: solid 0.7px #ddd;
  text-align: justify;
  /*line-height: 130px;*/
  float: initial;
  /* width: 789px; */
  padding-left: 10px;
  height: 130px;
  display: table;
}

.row-lister {
  min-inline-size: 460px;
  max-inline-size: 100%;
  /*float: left;*/
  border-radius: 2px;
  background-color: #f9f9f9;
  border-top: solid 0.7px #ddd;
  border-bottom: solid 0.7px #ddd;
  border-left: solid 0.7px #ddd;
  border-right: solid 0.7px #ddd;
  /*width: 940px;*/
  /* width:460px; */
  margin-right: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
  flex-grow: 1;
}

<div class="page_list_container">
  <div class="row-lister">
    <div class="column1">
      <span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span>
    </div>
    <div class="column2">
      <table>
        <tbody>
          <tr>
            <td>
              <h4>Title</h4>
              <em>Description here</em>
              <p class="button-page-list-p"><a href="" title="Bone fixation devices">Find out more</a></p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row-lister">
    <div class="column1">
      <span class="lister">
               <img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru"  />
            </span>
    </div>
    <div class="column2">
      <table>
        <tbody>
          <tr>
            <td>
              <h4>Title</h4>
              <em>Description here</em>
              <p class="button-page-list-p"><a href="" title="Bone fixation devices">Find out more</a></p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row-lister">
    <div class="column1">
      <span class="lister">
               <img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru"  />
            </span>
    </div>
    <div class="column2">
      <table>
        <tbody>
          <tr>
            <td>
              <h4>Title</h4>
              <em>Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here</em>
              <p class="button-page-list-p"><a href="" title="Bone fixation devices">Find out more</a></p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row-lister">
    <div class="column1">
      <span class="lister">
               <img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru"  />
            </span>
    </div>
    <div class="column2">
      <table>
        <tbody>
          <tr>
            <td>
              <h4>Title</h4>
              <em>Description here</em>
              <p class="button-page-list-p"><a href="" title="Bone fixation devices">Find out more</a></p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row-lister">
    <div class="column1">
      <span class="lister">
               <img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
            </span>
    </div>
    <div class="column2">
      <table>
        <tbody>
          <tr>
            <td>
              <h4>Title</h4>
              <em>Description here..... This is also a bit longer</em>
              <p class="button-page-list-p"><a href="" title="Bone fixation devices">Find out more</a></p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row-lister">
    <div class="column1">
      <span class="lister">
              <img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
           </span>
    </div>
    <div class="column2">
      <table>
        <tbody>
          <tr>
            <td>
              <h4>Title</h4>
              <em>Description here longer a bit ...</em>
              <p class="button-page-list-p"><a href="" title="Bone fixation devices">Find out more</a></p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row-lister">
    <div class="column1">
      <span class="lister">
              <img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
           </span>
    </div>
    <div class="column2">
      <table>
        <tbody>
          <tr>
            <td>
              <h4>Title</h4>
              <em>Description here</em>
              <p class="button-page-list-p"><a href="" title="Bone fixation devices">Find out more</a></p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row-lister">
    <div class="column1">
      <span class="lister">
              <img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
           </span>
    </div>
    <div class="column2">
      <table>
        <tbody>
          <tr>
            <td>
              <h4>Title</h4>
              <em>Description here</em>
              <p class="button-page-list-p"><a href="" title="Bone fixation devices">Find out more</a></p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

和页面中的最后一个 DIV(即使如果它的内容很小，但在最后一行中只剩下一个 ) 它的宽度无论如何都必须设置为 960px。

据说我为此使用了 flex。但它只解决了最后一行中唯一的 DIV 和 DIV 的内容依赖宽度。但是，如果您有许多包含不同内容的 DIV，那么您将拥有不同大小的 DIV，但是行将被 100% 填充。

编辑

我在包含内容的 DIV 中有一个表格，因此确定内容的长度可能很有用(因为我们无法预测内容的大小，因为它可能包含图像和不同风格的文字)。

我正在寻找 CSS 或 jQuery。

谢谢!

Answer 1

您可以使用最大宽度和动态单位作为 %。限制任何内容或元素可以使用的空间，具体取决于父元素。

在这种情况下使用:

.row-lister {
    max-width: 49%;
 }

这会将每个元素限制为其父级 .page_list_container 的 49%。我使用了 49%，因为每个元素之间都有边距。我建议您将边距设置为 %，这样它们加起来就是 100%。

希望这有帮助:)

* {
        box-sizing: border-box;
    }
    .page-list-img {
        clear: both;
        width: 100px;
        border-radius: 50%;
        vertical-align: middle;
        border: 1px solid #ddd;
        padding: 5px !important;
        opacity: 1.0;
        transition: opacity 500ms;
    }
    .page-list-img:hover {
        opacity: 0.5;
        transition: opacity 500ms;
    }
    .button-page-list-p {
        text-align: left;
    }
    span.lister {
    display: inline-block;
        vertical-align: middle;
        line-height: normal;

    }
    .page_list_container {
        width: 960px;
        display: flex;
        flex-wrap: wrap;
        background-color: #f2f2f2;
    }
    .column2 table {
        border: none;
        width: 100%;
        height: 130px;
    }
    .column2 table td {
        border-style: none !important;
        vertical-align: middle;
    }

    .column1 {
     text-align: center;
        line-height: 130px;
        float: left;
        width: 150px;
        padding-left: 10px;
        height: 130px;
    }
    .column2 {
        border-left: solid 0.7px #ddd;
     text-align: justify;
        /*line-height: 130px;*/
        float: initial;
        /* width: 789px; */
        padding-left: 10px;
        height: 130px;
        display: table;
    }
    .row-lister {
        min-inline-size: 460px;
        max-inline-size: 100%;
        max-width: 49%;
        /*float: left;*/
        border-radius: 2px;
        background-color: #f9f9f9;
        border-top: solid 0.7px #ddd;
        border-bottom: solid 0.7px #ddd;
        border-left: solid 0.7px #ddd;
        border-right: solid 0.7px #ddd;
        /*width: 940px;*/
        /* width:460px; */
        margin-right: 10px;
        margin-bottom: 10px;
        margin-top: 10px;
        flex-grow: 1;
}

<div class="page_list_container">
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p"><a  href="" title="Bone fixation devices">Find out more</a></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru"  /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p"><a  href="" title="Bone fixation devices">Find out more</a></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru"  /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here </em>
<p class="button-page-list-p"><a  href="" title="Bone fixation devices">Find out more</a></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru"  /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p"><a  href="" title="Bone fixation devices">Find out more</a></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here..... This is also a bit longer</em>
<p class="button-page-list-p"><a  href="" title="Bone fixation devices">Find out more</a></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here longer a bit ...</em>
<p class="button-page-list-p"><a  href="" title="Bone fixation devices">Find out more</a></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p"><a  href="" title="Bone fixation devices">Find out more</a></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p"><a  href="" title="Bone fixation devices">Find out more</a></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>