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

Question

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

它应该是这样的：如果我们有一个很长的内容 - 宽度应该是= 960px ，如果内容很少 - 只需 480px 。

所以只有两个值，只有两个宽度变化：960px或480px。

NotifyPropertyChange<T>

* {
  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（甚至，如果它的内容很少，但只有一个 最后一行 ）无论如何，它的宽度必须设置为 960px 。

据说我为此目的使用flex。但它只解决了最后一行中唯一的DIV和DIV的内容相关宽度。但是，如果你有很多内容不同的DIV你有不同大小的DIV，但行将被填充100％。

修改

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

我正在寻找CSS或jQuery。

谢谢！

Answer 1

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

在这种情况下使用：

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

这会将每个元素限制为父.page_list_container的49％。 我使用了49％，因为每个元素之间都有边距。我建议你在%设置边距，这样它们都可以加起来达到100％。

希望这会有所帮助：）

＆＃13;

＆＃13;

* {
        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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;