Question

我在网格中有三个响应大小的div，需要让它们的border-top被图像中断。一旦我弄清楚如何使用图像打断顶部边框，我将使用白色方块对底部边框执行相同的操作。此屏幕截图显示了所需的效果：https://ia601903.us.archive.org/20/items/ScreenShot20131007At12.30.32/Practivate-mockup.png

但是，到目前为止我最接近的是：https://ia601903.us.archive.org/20/items/ScreenShot20131007At12.30.32/Screen%20Shot%202013-10-07%20at%2012.30.32.png

问题在于绝对定位打破了页面的流量，如果所有内容都是固定的宽度，我可以解决这个问题，但是因为它全部响应（在基础4中构建），所以宽度都是未知的。没有绝对定位，有谁知道怎么做？

这是我正在使用的代码（内联样式只是为了让它在本网站上更容易阅读，而不是真正的代码）：

<div class="row" id="about">
    <div class="large-4 columns centered" id="entrepreneurs">
      <div class="thickborder" style="padding-right:10px; padding-left: 10px; margin-top:20px; position:relative">
              <img src="img/white/guitar.png" style="position: absolute; top: -89px;">
      <h2 class="subheader"> For entrepreneurs </h2>
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a venenatis quam, et sagittis quam. Aenean vehicula euismod ipsum, eget blandit libero auctor nec. Aenean pharetra sapien nec risus euismod mattis. Vestibulum volutpat tincidunt blandit. Curabitur dapibus ultrices arcu luctus condimentum. Morbi tellus nisi, accumsan sed hendrerit sit amet, mollis non sapien. Nulla eget purus ut nunc lacinia dignissim. Vestibulum feugiat porta cursus. Curabitur posuere mollis massa quis mollis. Suspendisse ac luctus est, nec vestibulum dolor.</p>
</div></div>


    <div class="large-4 columns centered" id="corporates">
            <div class="thickborder" style="padding-right:10px; padding-left: 10px; margin-top:20px; position:relative">
        <img src="img/white/cloud.png" style="position: absolute; top: -89px">

      <h2 class="subheader"> For corporates </h2>
      <p> consectetur adipiscing elit. Suspendisse a venenatis quam, et sagittis quam. Aenean vehicula euismod ipsum, eget blandit libero auctor nec. Nulla eget purus ut nunc lacinia dignissim. Vestibulum feugiat porta cursus. Curabitur posuere mollis massa quis mollis. Suspendisse ac luctus est, nec vestibulum dolor. Suspendisse potenti. Vivamus egestas vestibulum ante egestas adipiscing. In hac habitasse platea dictumst. Etiam eros orci, bibendum ut ultricies quis, mollis ut dolor.</p>
</div></div>

    <div class="large-4 columns centered" id="results">
            <div class="thickborder" style="padding-right:10px; padding-left: 10px; margin-top:20px; position:relative">
      <img src="img/white/drinks.png" style="position: absolute; top: -89px">
      <h2 class="subheader"> For results </h2>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a venenatis quam, et sagittis quam. Aenean vehicula euismod ipsum, eget blandit libero auctor nec. Aenean pharetra sapien nec risus euismod mattis. Vestibulum volutpat tincidunt blandit. Curabitur dapibus ultrices arcu luctus condimentum. Morbi tellus nisi, accumsan sed hendrerit sit amet, mollis non sapien. Nulla eget purus ut nunc lacinia dignissim. Vestibulum feugiat porta cursus. Curabitur posuere mollis massa quis mollis. Suspendisse ac luctus est. </p>
  </div></div>
  </div>

任何想法都非常感激。这应该是一个对更多人有用的问题，而不仅仅是我 - 除非这里的问题是我是新手。

Answer 1

您也可以使用伪元素执行此操作，从而完全从HTML中删除图像。

JSFiddle

div.feature-panel
{
    border : solid 10px cornflowerblue;
    margin-top: 50px;
}

div.feature-content
{
    padding : 40px 10px;
    color : cornflowerblue;
    position:relative;
}


.feature-content:before,
.feature-content:after {
    content:"";
    position:absolute;
    width:80%;
    height: 80px;
    left:50%;
    margin-left:-40%; /* half of width */
    background:white;
}

.feature-content:before {
      top:-45px;
    background-image: url(http://placekitten.com/64/64);
    background-position:center;
    background-repeat:no-repeat;
}

.feature-content:after{
      bottom:-45px; 
}

Answer 2

一个可能的解决方案是使用负边距将内容移动到正确的位置。

<强> HTML：

<div class="column">
    <img class="column-image" src="http://placekitten.com/100/100">
    <h2>For entrepeneurs</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit vulputate ante ac ornare. Suspendisse quis nisl vitae nisl fringilla imperdiet. Fusce non porta mauris. Pellentesque dapibus lectus ut felis pellentesque facilisis. Aenean condimentum porta aliquet. Duis luctus nisl non metus ornare, id volutpat turpis sodales. Maecenas at augue sed augue auctor laoreet non nec turpis. Suspendisse eu lacinia ligula. Vestibulum est dui, egestas at purus vitae, semper pulvinar leo. Fusce vitae placerat turpis. Mauris dignissim, ipsum ac placerat mollis, nulla mauris dignissim justo, porttitor viverra nisl massa et orci. Donec posuere lectus a orci semper, nec lacinia felis consectetur. Fusce id consequat lectus. Donec sed erat commodo, feugiat ligula vel, posuere augue. Integer id tempor massa.</p>
    <div class="column-footer-fix"></div>
</div>
<div class="column">
    <img class="column-image" src="http://placekitten.com/100/100">
    <h2>For entrepeneurs</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit vulputate ante ac ornare. Suspendisse quis nisl vitae nisl fringilla imperdiet. Fusce non porta mauris. Pellentesque dapibus lectus ut felis pellentesque facilisis. Aenean condimentum porta aliquet. Duis luctus nisl non metus ornare, id volutpat turpis sodales. Maecenas at augue sed augue auctor laoreet non nec turpis. Suspendisse eu lacinia ligula. Vestibulum est dui, egestas at purus vitae, semper pulvinar leo. Fusce vitae placerat turpis. Mauris dignissim, ipsum ac placerat mollis, nulla mauris dignissim justo, porttitor viverra nisl massa et orci. Donec posuere lectus a orci semper, nec lacinia felis consectetur. Fusce id consequat lectus. Donec sed erat commodo, feugiat ligula vel, posuere augue. Integer id tempor massa.</p>
    <div class="column-footer-fix"></div>
</div>
<div class="column">
    <img class="column-image" src="http://placekitten.com/100/100">
    <h2>For entrepeneurs</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit vulputate ante ac ornare. Suspendisse quis nisl vitae nisl fringilla imperdiet. Fusce non porta mauris. Pellentesque dapibus lectus ut felis pellentesque facilisis. Aenean condimentum porta aliquet. Duis luctus nisl non metus ornare, id volutpat turpis sodales. Maecenas at augue sed augue auctor laoreet non nec turpis. Suspendisse eu lacinia ligula. Vestibulum est dui, egestas at purus vitae, semper pulvinar leo. Fusce vitae placerat turpis. Mauris dignissim, ipsum ac placerat mollis, nulla mauris dignissim justo, porttitor viverra nisl massa et orci. Donec posuere lectus a orci semper, nec lacinia felis consectetur. Fusce id consequat lectus. Donec sed erat commodo, feugiat ligula vel, posuere augue. Integer id tempor massa.</p>
    <div class="column-footer-fix"></div>
</div>

<强> CSS：

.column {
    border: 5px solid #06c;
    float: left;
    margin-right: 10px;
    margin-top: 50px;
    text-align: center;
    width: 20%;
}

.column-image {
    margin-top: -50px;
}

.column-footer-fix {
    background-color: #fff;
    display: inline-block;
    height: 25px;
    margin-bottom: -25px;
    width: 100px;
}

JSFiddle example.

边距会添加到列顶部，以便为其上方的图像腾出空间。使用此解决方案可能会更清晰地使用伪元素。

该栏的底部部分有点hacky，但我没有时间提出更好的解决方案。

Answer 3

您可以在要覆盖在顶部边框上的图片上使用否定margin-top获得此效果，并使用margin-left，margin-right作为auto以使图像居中在div。

这是一个示例小提琴我执行此操作http://jsfiddle.net/ndzQP/1/

CSS：

div.feature-panel
{
    border : solid 10px cornflowerblue;
    margin-top: 50px;
}

img.feature-image
{
    margin-top : -50px;
    margin-left: auto;
    margin-right : auto;
    display : block;
}

HTML：

<div class="feature-panel">
<img class="feature-image" src="http://placekitten.com/64/64" />

<div class="feature-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a venenatis quam, et sagittis quam. Aenean vehicula euismod ipsum, eget blandit libero auctor nec. Aenean pharetra sapien nec risus euismod mattis. Vestibulum volutpat tincidunt blandit. Curabitur dapibus ultrices arcu luctus condimentum. Morbi tellus nisi, accumsan sed hendrerit sit amet, mollis non sapien. Nulla eget purus ut nunc lacinia dignissim.
</div>

如何用图像中断div的边框？

3 个答案: