1

おそらく何千もの同様の質問がありますが、見つけたものはすべて読みましたが、これまでのところ何もうまくいきませんでした.

画像ではなく、テキストを DIV に配置したい。テキストと画像は同じ行にあります。実験中に、画像とテキストの両方にさまざまなスタイルを適用しようとしました。各 DIV を別々の行に配置するため、テキストを div で囲むことはできません。ラベルを使用して、スタイルをそれに設定しました。

CSS:

.FileFolderStyle {
    background-color: #D9FFD5;
}
.FileFolderImg
{
    width : 32;
    height: 32;
    margin:10px 0px;
}
.FileFolderText
{
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
}

HTML:

<div class="FileFolderStyle">
   <img class="FileFolderImg" src="File.png"/> 
   <label class="FileFolderText">File name </label>
</div>

ファイルの「F」の上部は、画像の上部に隣接している必要があります。この些細なことに文字通り何時間も費やしましたが、解決策を見つけることができませんでした. ここに JSFiddle があります: http://jsfiddle.net/SxCH2/46/

そのままのスクリーンショット:

ここに画像の説明を入力

望ましい結果のスクリーンショット:

ここに画像の説明を入力

4

2 に答える 2

2

inline-blockで要素を使用してみてくださいvertical-align:top;。すべてを含む の上部に揃える必要があります<div>。次に、画像にmargin-top既に10px余白があるので、必要なものを追加します。それも追加したいと思います<label>。line-height現在、line-height が font-size を超えているため、テキストの上下に少し余分な空白が生じるため、テキストの配置をより適切に制御するために を調整する必要がある場合があります。

例: http://jsfiddle.net/SxCH2/59/

.FileFolderImg
{
    width : 32px;
    height: 32px;
    margin:10px 0px;
    display:inline-block;
    vertical-align:top;
    border:1px solid red;
    content:"";
}
.FileFolderText
{
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    display:inline-block;
    vertical-align:top;
    margin-top:10px;
    line-height:16px;
}​
于 2012-12-02T18:03:12.810 に答える
1

これが実際の例です: http://jsfiddle.net/SxCH2/57/上と下にマージンがあったため、達成がより困難になりました。私は使用しましdisplay:inlineた。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div class="FileFolderStyle">
   <img class="FileFolderImg" src="File.png"/> 
   <div class="FileFolderText">File name </div>
</div>

</body>
</html>

ワーキングCSS:

.FileFolderStyle {
    background-color: #D9FFD5;
}
.FileFolderImg
{
    width : 32px;
    height: 32px;
    display:inline;
    vertical-align:top;
}
.FileFolderText
{
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    display:inline;
    vertical-align:top;
}​
于 2012-12-02T18:08:09.857 に答える