1

indesign や quark... 段落のインデント... for picure のように行うのが好きです

htmlとcssでそれを行う適切な方法は?

テキストが画像を一周したくない...左側全体を保護したい画像に余白を置くとうまくいく...しかし、10-20-30ピクセルの場合（固定量（悪い））

私は負のポジショニングを試しました..運が悪い！

ここに説明する小さな画像があります！

代替テキスト http://produits-lemieux.com/indent.jpg

4

5 に答える 5

5

次のように、両方の列を div に入れ、左に浮かせてみましたか?

<div style="float:left;">
  <img src="x"/>
</div>
<div style="float:left;">
  Text ....
</div>

フローティング div が残っていると、十分なスペースがある限り、横に並べて表示されます。

于 2009-09-26T11:11:21.757 に答える
3

画像が同じ幅になる場合は、次のコードが機能するはずです (Safari 4 でテスト済み)。

基本的には、画像を左に浮かせてから、マージンを使用してテキストを右に押します (パディングも機能します)。(余白は、少なくとも画像の幅である必要があります。できれば、画像とテキストの間に隙間ができるように、余白を大きくする必要があります。)

HTML:

<div class="box">
    <img src="http://url.to/image.jpg" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p class="source">Source: Le Petit Robert 2009</p>
</div>

CSS:

img {
    float: left;
}

p {
    margin-left: 80px;
}
于 2009-09-26T11:33:22.570 に答える
0

すべての場合に推奨されるわけではありませんが、マークアップを編集したくない/編集できない場合の良い代替手段：Javascriptを使用した同じ高さの列

于 2009-09-27T09:38:00.217 に答える
0

写真が常に同じ幅である場合、これは非常に簡単に行うことができます。写真を 1 つdivに配置し、コンテンツを別の に配置します。次に、次の css を使用します。

div.pic {
    position: relative;
    float: left;
    padding-right: 10px;
    clear: left;
    width: 65px; /* The width of the picture */
}

div.content {
    position: relative;
    float: left;
    clear: right;
    width: 450px; /* The container's width minus (picture + 10px padding)
}
于 2009-09-26T11:12:51.457 に答える
0

関心のある段落が 1 つだけの場合は、次を使用できます。

p {
    overflow: hidden;
}

しかし、それは画像の次に始まる段落に対してのみ機能します。

于 2009-09-26T14:04:53.457 に答える