图像,文本和按钮并排CSS

时间:2013-06-20 03:09:07

标签: html css css3

我是CSS新手,我希望在HTML或CSS中实现以下功能,任何帮助都会很棒。

enter image description here

我有代码

<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>

1 个答案:

答案 0 :(得分: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>