Make sibling div follow width of its sibling img-CodePudding

I want to show an image and two buttons below it, image dimensions could vary a lot, so I set max-width to 60% and max-height to 80%, but I'm not sure how to make these two buttons below to be aligned correctly under the image, left button floating on the left, right on the right of .buttons div, and .buttons div should be exact width of image.

Here's my HTML:

<div class='content'>
    <img class='nft'>
    <div class='buttons'>
        <button class='buy'>Buy</button>
        <button class='share'>Share</button>
    </div>
</div>

CSS looks like this:

.content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
}

.nft {
    max-width: 60%;
    max-height: 80%;
    display: block;
    margin: auto;
    margin-bottom: 32px;
}

.buy {
    float: left;
}

.share {
    float: right;
}

CodePudding user response：

It's unclear if you want the buttons to expand to each fill half of the width of the image above them. That was my take, though, so here is an example showing the buttons filling space at different image widths:

.content {
  display: inline-flex;
  flex-direction: column;
}

.buttons {
  display: flex;
}

.buttons>button {
  flex: 1;
}

<div class='content'>
  <img src='http://placekitten.com/400/200' class='nft'>
  <div class='buttons'>
    <button class='buy'>Buy</button>
    <button class='share'>Share</button>
  </div>
</div>

<div class='content'>
  <img src='http://placekitten.com/200/200' class='nft'>
  <div class='buttons'>
    <button class='buy'>Buy</button>
    <button class='share'>Share</button>
  </div>
</div>