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

段落に高さと幅を割り当て、画像の幅の左マージンを追加し、画像と段落を左にフロートすると、必要なものが得られます。

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

于 2012-11-14T00:50:20.863 に答える
1

段落は常に最後のオブジェクトの後ろから始まり、次のオブジェクトも段落の後ろから始まります。

<img src="..."><span>Your text here</span>タグを試してください。これはインラインでレンダリングされます!

すみません、今日は午前 2:00 では遅すぎます。

于 2012-11-14T00:46:06.797 に答える