将div设置为其第一个兄弟宽度

Question

我有一个包含灵活图像和描述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/

Here's a similar question, but I couldn't get the answer to work.

Answer 1

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

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

＆＃13;

＆＃13;

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

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

#caption {
  text-align: center;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jsFiddle

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

希望它有所帮助！