图像，文本和按钮并排CSS

Question

我是CSS的新手，我想实现HTML或CSS的后续功能，任何帮助都将非常有用。

我有的代码

<div>
    <p>
        <img src="/dist/img/photos/featured-member-justine.jpg" height="50px" width="50px" /> <b>Influencer Name</b>
        <input type="button" value="Ignore" />
        <input type="button" value="Accept" />
    </p>
</div>

Answer 1

您可以这样实现：

<html>
    <body>
        <div>
            <div style="height:100px;">
                <div id='image' style="float:left;"><img src="" width="50px;" height="50px;"/></div>
                <div>
                    <div id='header' style="float:left;width=80%;" >
                        Influencer Name
                    </div><br/>
                    <div id='description' style="float:left;width=80%;">
                        Campaign: Campaign name lorem ipsum
                    </div>
                </div>
                <div id='buttons' style="float:right;">
                    <input type="submit" value="Ignore" />
                    <input type="submit" value="Accept" />
                </div>
            </div>
             <div  style="height:100px;">
                <div id='image' style="float:left;"><img src="" width="50px;" height="50px;"/></div>
                <div>
                    <div id='header' style="float:left;width=80%;" >
                        Influencer Name
                    </div><br/>
                    <div id='description' style="float:left;width=80%;">
                        Campaign: Campaign name lorem ipsum
                    </div>
                </div>
                <div id='buttons' style="float:right;">
                    <input type="submit" value="Ignore" />
                    <input type="submit" value="Accept" />
                </div>
            </div>
        </div>
    </body>
</html>