html - 如何将这种结构转换为flex-box？

当前基于表格的设计如下所示（图片的大小和比例不同；目标是使所有img和文本适合同一行并调整图片的大小，以保持比例）：

<style>
    table td, table td *
    {
        vertical-align: top;
    }
    img
    {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }
</style>
<table style="width: 100%;">
    <tr>
        <td>
            <table>
                <tr>
                    <td>
                        <img src="Pics/m51_1.jpg" />
                    </td>
                    <td>
                        text text text text text text text text text text text text text text text text
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table>
                <tr>
                    <td>
                        <img src="Pics/hubble.jpg" />
                    </td>
                    <td>
                        text text text text text text text text text text text text text text text text
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

我直接将其转换为Flex-Box设计的尝试如下：

<style>
    div
    {
        max-width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    img
    {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }
</style>
<div style="width: 100%;">
    <div>
        <img src="Pics/m51_1.jpg" />
        text text text text text text text text text text text text text text text text
    </div>
    <div>
        <img src="Pics/hubble.jpg" />
        text text text text text text text text text text text text text text text text
    </div>
</div>

不幸的是，它不能在所有主流浏览器中正常工作（Chrome，FF和Edge中的不同错误）。有什么想法使它起作用吗？

最佳答案

尝试这个

.container
{
  display: flex;
  flex-direction: row;
}
.box{
  display:flex;
  flex-direction:row;
}
.img, .text{
    flex: 1 1 0px;
}
img{
  width:100%;
}

<div class="container">
  <div class="box">
    <div class="img">
      <img src="https://picsum.photos/536/354" />
    </div>
    <div class="text">
      text text text text text text text text text text text text text text text text
    </div>
  </div>
  <div class="box">
    <div class="img">
      <img src="https://picsum.photos/536/354" />
    </div>
    <div class="text">
      text text text text text text text text text text text text text text text text
    </div>
  </div>
</div>

关于html - 如何将这种结构转换为flex-box？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58887033/