当前基于表格的设计如下所示(图片的大小和比例不同;目标是使所有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/