Question

我有以下HTML使用flex container来容纳两个div，一个包含图像（在左侧），另一个包含一些文本：

<!DOCTYPE html>
<html>
<body>

<div id="wrapper" style="display:flex; background:pink;">

    <div id="image_div">
        <img src="http://i.imgur.com/MvnfA1U.png">
    </div>

    <div id="number_list">
        <h3>One</h3>
        <h3>Two</h3>
        <h3>Three</h3>
        <h3>Four</h3>
        <h3>Five</h3>
        <h3>Six</h3>
        <h3>Seven</h3>
    </div>

</div>
</body>
</html>

结果如下：

如何让图像增加尺寸并占据其（粉红色）容器的整个高度，同时：

保持图像与文本相邻（仅向右移动）
维护图像的宽高比
不切断部分图像
没有文字重叠图像
保持通用（例如，不指定像素长度）

由于

Answer 1

    <!DOCTYPE html>
    <div id="wrapper" style="display:flex; background:pink;justify-content:space-between;">
    
        <div id="image_div">
            <img src="http://i.imgur.com/MvnfA1U.png" style="height:100%;">
        </div>
    
        <div id="number_list" style="width:50%">
            <h3>One</h3>
            <h3>Two</h3>
            <h3>Three</h3>
            <h3>Four</h3>
            <h3>Five</h3>
            <h3>Six</h3>
            <h3>Seven</h3>
        </div>
    
    </div>

如何使图像填充Flexbox项目？

1 个答案: