0

以前にいくつかの画像リンクがあり、すべての画像に高さが定義されていました。リンク (a href タグ) を削除したら、画像が大きくなりました。

スクリーンショットを参照してください: http://i.stack.imgur.com/ePsxC.png

すべて同じサイズの1行目のように見せたいのですが（リンクを削除したために円が大きくなっている2行目とは対照的です）、円を何にもリンクさせたくありません。マージンとボーダーも定義したので、デフォルトのブラウザーの問題ではないと思います。おそらく、画像リンクを保持しているネストされた div と関係がありますが、私にはわかりません。

あなたが提供できる助けをありがとう。

ソースを表示するのに役立つ場合は、次の Web サイトを参照してください: http://ink-12.web5test.terc.edu/aboutus/example.cfm

関連する CSS:

.text2col{
margin-left:12.5em;
border:0.1em solid black;
background-color:white;
padding:1em;
min-width:46em;
overflow:auto;
text-align:left;
max-height:31em;

}

.text2colin{
overflow:auto;
}

.teaminfo{
margin-left:5em;
margin-top:-0.25em;
}

#img{
text-align:center;
}

.imgteam{
margin:1em;
height:auto;
width:auto;
float:left;
text-align:center;
}

.imgteam a:hover img{
border:0.2em solid #cd05ff;
}

.imgteam img{
display:inline;
margin:0;
border:0.2em solid black;
width:9.5em;
height:9.5em;
-moz-border-radius:4.75em;
-webkit-border-radius:4.75em;
border-radius:4.75em;
}

.imgschool{
margin:1em;
height:auto;
width:auto;
float:left;
text-align:center;
}

.imgschool a:hover img{
border:0.2em solid #cd05ff;
}

.imgschool img{
display:inline;
margin:0;
border:0.2em solid black;
width:19em;
height:9.5em;
-moz-border-radius:2em;
-webkit-border-radius:2em;
border-radius:2em;
}

.teamcaption{
text-align:center;
font-weight:normal;
width:auto;
margin:0.2em;
}

.imgteamsmall img{
width:4em;
height:4em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
border-radius:1em;
border:0.2em solid black;
float:left;
}

関連する html:

<div class="text2colin">

<div class="imgschool"><a target="blank" href="http://terc.edu"><img src="img/school.png" alt="picture of school"></a>
<div class="teamcaption"><p class="img"><strong>Name of school</strong><br />School system</p>
    </div>
</div>              

<div class="imgteam"><a href="#teacherinfo"><img src="img/school.png" alt="picture of teacher"></a>
<div class="teamcaption"><p class="img"><strong>Teacher's name</strong><br />Grade # Teacher</p>
    </div>
</div>

<div class="imgteam"><a href="teacherinfo"><img src="img/school.png" alt="picture of teacher"></a>
<div class="teamcaption"><p class="img"><strong>Teacher's name</strong><br />Grade # Teacher</p>
    </div>
</div>                

</div><!--end div class=text2colin-->

<div class="text2colin">

<h4>Section Header Two</h4>

</div><!--end div class=text2colin-->

<div class="text2colin">

<div class="imgschool"><a target="blank" href="http://terc.edu"><img src="img/school.png" alt="picture of school"></a>
<div class="teamcaption"><p class="img"><strong>Name of school</strong><br />School system</p>
    </div>
</div>

<div class="imgteam"><img src="img/school.png" alt="picture of teacher">
<div class="teamcaption"><p class="img"><strong>Teacher's name</strong><br />Grade # Teacher</p>
    </div>
</div>

<div class="imgteam"><img src="img/school.png" alt="picture of teacher">
<div class="teamcaption"><p class="img"><strong>Teacher's name</strong><br />Grade # Teacher</p>
    </div>
</div>
4

2 に答える 2

1

em の代わりに px を使用してみてください。例: height: 100px.

于 2012-04-23T17:47:55.807 に答える
0

問題は、ここに投稿した CSS ではなく、fonts.cssスタイルシートにあります。

a:link {text-decoration:none; color:blue; font-size:0.9em}

また、フォント サイズは継承されるため、 内のすべてのaフォント サイズがこのフォント サイズになり、9.5em内のフォント サイズは外部のフォント サイズaと同じにはなりません。9.5em

于 2012-04-24T07:08:15.573 に答える