html中让文字和图片所在的div平行（绝对有用假一赔十）

试过了网上说的所谓的 vertical-align: middle 还有一些杂七杂八的方法发现一个都没用，那么只好祭出必杀技了。

首先创建一个父div，即图片和文字这两个子div的父节点，我们可以看到上方的div内部是段落文字，下方是图片。

<div>
        <div>           
            <p class="content">
                The top six countries by internet users (and the only countries with over 100 million) in 2016/17 were
            </p>
            <p class="content">
                1. China = 765 million

            </p>
            <p class="content">
                2. India = 391 million

            </p>
            <p class="content">
                3. United States = 245 million

            </p>
            <p class="content">
                4. Brazil = 126 million

            </p>
            <p class="content">
                5. Japan = 116 million

            </p>
            <p class="content">
                6. Russia = 109 million
            </p>


        </div>
        <div>
            <img src="charts/internet/top6.png" width="400px" height="680px">
        </div>
    </div>

 

但显示结果是一上一下

 

 

痛定思痛，为了让两个div平行，我们需要在它们共有的父div上加两个style，即

 <div style="display: flex; justify-content: space-between; ">

<div style="display: flex; justify-content: space-between; ">
        <div>
            <p class="content">
                The top six countries by internet users (and the only countries with over 100 million) in 2016/17 were
            </p>
            <p class="content">
                1. China = 765 million

            </p>
            <p class="content">
                2. India = 391 million

            </p>
            <p class="content">
                3. United States = 245 million

            </p>
            <p class="content">
                4. Brazil = 126 million

            </p>
            <p class="content">
                5. Japan = 116 million

            </p>
            <p class="content">
                6. Russia = 109 million
            </p>


        </div>
        <div>
            <img src="charts/internet/top6.png" width="400px" height="680px">
        </div>
    </div>

结果：

 

样式可能不好看，但好歹是平行了，接下来只要微调一下样式即可。