2

以下のコード:

CSS

#block { 
    border-width: 2px; 
    border-color: #4682B4; 
    background-color: #E0FFFF; 
    width: 200px; 
    text-align: center; 
}

HTML

<div id="block">
<h3>Test header</h3>

<p>
<img height="100" style="max-width: 120px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
</p>

<p>
Test text
</p>
</div>

これを生成します：

ここに画像の説明を入力

画像を画面の左上隅に揃えるにはどうすればよいですか?

左上隅とは、矢印で示されるポイントに揃えることを意味します。

ここに画像の説明を入力

「背景位置：左上;」を試しました しかし、これは何の違いもありません。

「Fags」の回答を試した後、同じ結果が得られます。

ここに画像の説明を入力

4

4 に答える 4

3

このような

デモ

CSS

*{
    margin:0;
    padding:0;
}
#block { 
    border-width: 2px; 
    border-color: #4682B4; 
    background-color: #E0FFFF; 
    width: 200px; 
    text-align: center; 
    line-height:30px;
    padding:3px 0;
}

デモ1

于 2013-08-26T10:05:36.117 に答える
2

現在のコードに従って、この修正を試してください。それはあなたの望む結果に近いです。

div の背景色が画像とは異なるため、少し奇妙に見えるかもしれません。

PS: いつでも透明な画像を持つことができます。

フィドル

#block { 
    border-width: 2px; 
    border-color: #4682B4; 
    background-color: #E0FFFF; 
    width: 200px; 
    text-align: center; 
    overflow:hidden;
}
img{
   float:left;
}

配置する必要がある img タグが他にもある場合は、個別の画像スタイリング用の css クラスまたは ID を作成してください。

出力：

ここに画像の説明を入力

于 2013-08-26T10:11:27.723 に答える
1

HTML 要素にはデフォルトの動作があり、margin、padding、line-height などの値が設定されています。最初にそれらをリセットしてから、要件に合わせてカスタマイズする必要があります。

以下のCSS RESETリンクを参考にしてください。

コード：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

要素のデフォルトの動作をリセットするには、スタイルシートに上記のコードを追加する必要があります。これにより、デフォルトの特性が削除され、要素をカスタマイズできるようになります。

これが役立つことを願っています。

于 2013-08-26T10:11:40.893 に答える
0

私が理解しているように、float:left画像を左に揃えて HTML 構造を変更するために使用します。このようなものを探していると思いますhttp://jsfiddle.net/H4F8H/12/

于 2013-08-26T10:45:11.747 に答える