0

画像を追加して、その画像の右側にテキスト（タイトル）を配置し、このタイトルの下に場所とulを配置しようとしています。しかし、問題は、float left to imgを使用すると、テキストが画像の右側に表示されるだけでなく、画像の下部にも表示されることです。テキストとulを右側に表示し、同時に画像の上部にも表示したいと思います。

現在、下の画像のように表示されます

ここに画像の説明を入力してください

<img src="images/image1.png" width="48" height="48" class="intro" />
<p class="title">
    Inter
</p>
<p>
<ul>
<li>One statement</li>
<li>One statement</li>
<li>One statement</li>
</ul>
</p>

<img src="images/image1.png" width="48" height="48" class="intro" />
<p class="title">
    Inter
</p>
<p>
<ul>
<li>One statement</li>
<li>One statement</li>
<li>One statement</li>
</ul>
</p>

<img src="images/image1.png" width="48" height="48" class="intro" />
<p class="title">
    Inter
</p>
<p>
<ul>
<li>One statement</li>
<li>One statement</li>
<li>One statement</li>
</ul>
</p>

.intro {
    float: left;
}
4

2 に答える 2

3

表示表示を使用します：inline-block; pとliでまたは使用

<div class="edit">
    <img src="images/image1.png" width="48" height="48" class="intro" />
    <p class="title">
        Inter
    </p>
    <p>
    <ul>
    <li>One statement</li>
    <li>One statement</li>
    <li>One statement</li>
    </ul>
    </p>
   </div>

CSS：

.div{
 float:left;
 width:400px or 100%;
 }
 img
{
  width:50%
}

このようにアプローチするか、display：inline-block;を使用してください。

于 2012-06-25T09:14:49.597 に答える
0

Arpitが言うように、インラインブロックを使用します。また、画像は非常に小さいので、画像にマージン/パディングを追加して、すべてを正しく整列させることができます。

例

于 2012-06-25T09:22:48.377 に答える