3

我需要在 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; }
4

3 回答 3

2

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

于 2012-11-14T01:24:18.307 回答
1

段落总是在最后一个对象之后开始，下一个对象也将从该段落开始。

尝试<img src="..."><span>Your text here</span>标签，这将是内联渲染！

抱歉，今天凌晨 2:00 对我来说太晚了！

于 2012-11-14T00:46:06.797 回答
1

为段落分配高度和宽度，并添加图像宽度的左侧边距，将图像和段落向左浮动，您应该拥有所需的内容。

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

于 2012-11-14T00:50:20.863 回答