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

如果你想要一条水平线作为视觉效果，你不需要<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所有块创建一个伪元素。.infobox_picture

伪元素会有一个 1px 的上边框，top偏移量是下边距的二分之一（加上一个像素或上边框的宽度）。

参见演示：http: //jsfiddle.net/audetwebdesign/uuWUF/

于 2013-09-30T14:20:00.410 回答
1

首先，使用class，而不是 id 的 div ：

.infobox_picture {

和：

<div class="infobox_picture">

为您的 div 定义顶部和底部填充，而不是顶部和底部边距（反之亦然，具体取决于您希望元素的行为方式）。

于 2013-09-30T13:56:12.810 回答
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>

您应该使用 Class 属性 ( .infobox_pictureand class=infobox_picture) 而不是多次设置相同的 ID，因为这会使您的 HTML 无效。

此外，如果您删除padding-bottom:14px;然后每个 div 将均匀间隔（即 30 像素 +<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 回答