Question

我需要在html页面的图像左侧放置一个段落。现在，文本位于图像旁边，但段落本身在图像后面延伸到容器的左侧。我希望他们只是在彼此旁边，内联，与正常文本一样包装段落中的文字。

<div class="content-box">
            <h1>Welcome to Genesis of Robotics!</h1>
            <p>Unrelated text </p>
                <div id="holder">
                    <img id="problem-image" src="css/images/problem_image.jpg" width="500px" height="300px">
                    <p class="p">The Problem Text</p>
                </div>
            <img src="css/images/define.png" width="200px" height="200px">
            <img src="css/images/brainstorm.png" width="200px" height="200px">
        </div>

CSS：

#drawing-image {border-radius: 15px; }
    .content-box h1{color:#fff; text-align: center; margin: auto; width: 630px;    background: url(css/images/paper.png); padding: 12px; border-radius: 15px;}
    .content-box p{padding-top: 40px; padding-bottom: 40px;}
    #holder {height: 0px; width: auto; height: auto; }
    #holder p { height: auto; width: 100px; }
    #holder img { margin: 15px; }

Answer 1

这个怎么样？ #holder img { float:left; display:inline; padding-right:10px;} #holder p {display:inline;}

Answer 2

段落始终在最后一个对象后面开始，下一个对象也将开始nrhinf段落。

尝试<img src="..."><span>Your text here</span>代码，这将呈现内联！

抱歉凌晨2点，对我来说太迟了！

Answer 3

为段落指定高度和宽度，并添加图像宽度的左边距，浮动图像和左边的段落，你应该得到你需要的。

#holder p { float:left;height: auto; width: 100px; margin-left:100px } #holder img { float:left;margin: 15px; }

如何在<{p> <div>？</div>中的<img/>旁放置一个<p>

3 个答案: