0

だから私がやろうとしているのは、画像の上に直接ではなく、画像の間に線が均等になるようにすることです。問題は、画像の周りにマージンを使用していることにあります。関連する css と html:

#infobox_picture {
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: 10px;
clear: both;
padding-bottom: 14px;
background-position: center bottom;
background-repeat: no-repeat;
height: 90px;
}

<div id="infobox_picture">
<img src="images/image1.png" width="91" height="90" align="left"  class="frame-img">
 </div>
 <div id="infobox_picture">
 <hr >
  <img src="images/image1.png" width="91" height="90" align="left"         class="frame-img">
  </div>
     <div id="infobox_picture">
  <hr />
<img src="images/image1.png" width="91" height="90" align="left"         class="frame-img">
 </div>
4

3 に答える 3

1

まず、div の id ではなくclassを使用します。

.infobox_picture {

と：

<div class="infobox_picture">

div の上下の余白ではなく、上下のパディングを定義します (要素をどのように動作させたいかによって、その逆も可能です)。

于 2013-09-30T13:56:12.810 に答える
1

視覚効果として水平線が必要な場合は、<hr>タグは必要ありません。

疑似要素を使用して次のことを試すことができます。

もしあなたが持っているなら

<div class="infobox_picture">
    <img src="http://placehold.it/91x90" width="91" height="90">
</div>
<div class="infobox_picture">
    <img src="http://placehold.it/91x90" width="91" height="90">
</div>
<div class="infobox_picture">
    <img src="http://placehold.it/91x90" width="91" height="90">
</div>

CSS の場合:

.infobox_picture {
    margin: 0 auto 15px 10px;
    background-color: beige;
    height: 90px;
    position: relative;
}
.infobox_picture ~ .infobox_picture:before {
    content: '';
    position: absolute;
    left: 0;
    top: -8px;
    width: 100%;
    border-top: 1px solid black;
}

最初のブロック以降の.infobox_pictureすべてのブロックに対して疑似要素 on を作成します。.infobox_picture

疑似要素には 1 ピクセルの上部ボーダーがあり、topオフセットは下部余白の半分 (プラス 1 ピクセルまたは上部ボーダーの幅) です。

デモを参照してください: http://jsfiddle.net/audetwebdesign/uuWUF/

于 2013-09-30T14:20:00.410 に答える
0

次の CSS と HTML を試してください。

.infobox_picture {
    margin-top: 15px;
    margin-right: auto;
    margin-bottom: 15px;
    margin-left: 10px;
    clear: both;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 90px;
}
    <div class="infobox_picture">
        <img src="images/image1.png" width="91px" height="90px" align="left" class="frame-img">
    </div>
    <hr />
    <div class="infobox_picture">            
        <img src="images/image1.png" width="91px" height="90px" align="left" class="frame-img">
    </div>
    <hr />
    <div class="infobox_picture">

        <img src="images/image1.png" width="91px" height="90px" align="left" class="frame-img">
    </div>

HTML が無効になるため、同じ ID を複数回設定するのではなく、Class 属性 (.infobox_pictureおよび) を使用する必要があります。class=infobox_picture

また、を削除するとpadding-bottom:14px;、各 div は均等に配置されます (つまり、30px +<hr />高さの間隔)。padding-bottom:14px;それぞれの間にスペースを含めると、29px上と下になり<hr />ます15px。<hr />44px

例：ありpadding:14px;

    img
    (15px)
    (14px)
    -------
    (15px)
    img

それなしpadding:14px;

    img
    (15px)
    -------
    (15px)
    img
于 2013-09-30T14:14:26.320 に答える