将 div 设置为其第一个兄弟姐妹的宽度答案

【问题标题】：Set div to its first siblings width将 div 设置为其第一个兄弟姐妹的宽度
【发布时间】：2017-07-23 04:45:38
【问题描述】：

我有一个包含灵活图像和描述 div 的列。

当我不知道图片的宽度时，如何确保描述宽度永远不会超过图片？

当 vh 变得太小时时会出现问题。

我想要发生的事情：

会发生什么：

.modal-content {
  width: 80vw;
  height: 80vh;
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.slidencaption {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #B83F41;
}

.mySlides img {
  margin: auto;
  max-width: 100%;
  max-height: 70vh;
  display: block;
}

.caption-container {
  display: block;
  margin: auto;
  text-align: center;
  width: 50%;
  padding: 1px 16px;
  color: white;
  min-width: 100px;
  background: #E94779;
  text-align: center;
  word-break: break-all;
  text-overflow: ellipsis;
}

<div id="myModal" class="modal">
  <div class="modal-content">
    <div class="slidencaption">
      <div class="mySlides">
        <img src="http://i.imgur.com/nKoVqZO.jpg">
        <div class="caption-container">
          <p id="caption">blah blawlhekjr kwjehr kwjehr kwjehr kw kqwjh wk kj hkwehr kwjehr kwejrh wk kw jherkw kwh rdfkhsdkjf ksjdfhk sjdhf k ksjhfks jdhfk js skjdhfk sjdhfkj sdhfk skdjfhksdjfh ksdhf ksdjhfksjdhfkjsh kshdfksjdhfkjs hdf ksjhdfksjh fksh skdfh ksjdhfk
            sj skdfh ksdjfh skskj dhfskjd hfksd </p>
        </div>

      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/a47c7yn5/

【问题讨论】：

您的代码似乎不完整，要发布其余部分吗？

标签： html css flexbox

【解决方案1】：

您执行此任务的代码似乎过于复杂。

我认为您正在寻找的可能就像这样简单：

.mySlides {
  display: flex;
  flex-direction: column;
  width: 75%;
  margin: 0 auto;
}

.mySlides img {
  width: 100%;
  max-height: 70vh;
}

#caption {
  text-align: center;
}

<div class="mySlides">
  <img src="http://i.imgur.com/nKoVqZO.jpg">
  <p id="caption">blah blawlhekjr kwjehr kwjehr kwjehr kw kqwjh wk kj hkwehr kwjehr kwejrh wk kw jherkw kwh rdfkhsdkjf ksjdfhk sjdhf k ksjhfks jdhfk js skjdhfk sjdhfkj sdhfk skdjfhksdjfh ksdhf ksdjhfksjdhfkjsh kshdfksjdhfkjs hdf ksjhdfksjh fksh skdfh ksjdhfk sj skdfh ksdjfh skskj dhfskjd hfksd</p>
</div>

jsFiddle

【讨论】：

感谢您抽出宝贵时间回复，不幸的是，这会扭曲图像并且在调整大小时不会保持其比例。将 mySlides 宽度更改为 vh 有助于解决此问题，但是，尽管图像本身很大，但它会导致图像比 75 vh 小得多。我目前正在尝试找出导致大幅缩小的原因。
完全是最大高度，谢谢！抱歉问了这么多，但最初我把它放在那个 modal-content/wrapper div 中，但是在用这个重新插入它之后，它会忽略父大小并流血，有什么想法吗？
是align-items: center，它试图始终保持内容垂直居中。 jsfiddle.net/gav43vzd/1
我想这就是最初的问题出了什么问题，对于各种尺寸的图像，图像需要以这种方式居中，但在其下方添加描述会使对齐不正常。我也是这么想的，但是一旦它超过了 img+description 的高度，它仍然会垂直泄漏。我对这一切都很陌生，你将如何在将其保持在模态内容 div 内的同时将其居中?
我不太确定您的总体目标是什么，但可以尝试一下（顺便说一句，我正在 Chrome 上测试）：jsfiddle.net/gav43vzd/2

【解决方案2】：

当图像被加载时，我们需要找到图像的宽度并将其应用到它的描述 div。我们可能还需要同时考虑 onload 和 screen resize 情况。

如果你可以使用jQuery，那么你可以这样解决。

$(document).ready(function() {
    handleImgDescSize();
});

$( window ).resize(function() {
    handleImgDescSize();
});

function handleImgDescSize() {
    $("div.caption-container").width($("#imgId").width());
}

它在这里工作 - https://jsfiddle.net/a47c7yn5/2/

希望对你有帮助！

【讨论】：