0

我在一个网格中有三个响应大小的 div，它们的边框顶部需要被图像打断。一旦我弄清楚如何用图像打断顶部边框，我会用白色方块对底部边框做同样的事情。所需效果显示在此屏幕截图中：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

问题是绝对定位会破坏页面的流动，如果一切都是固定宽度，我可以解决这个问题，但由于它都是响应式的（内置于 Foundation 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>

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

4

3 回答 3

2

您也可以使用伪元素执行此操作，从而完全从 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; 
}
于 2013-10-07T12:12:52.867 回答
0

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

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 示例。

列的顶部添加了一个边距，以便为其上方的图像腾出空间。使用此解决方案，使用伪元素可能会更干净。

专栏的底部有点老套，但我真的没有时间想出更好的解决方案。

于 2013-10-07T11:58:12.910 回答
0

margin-top您可以在要覆盖在顶部边框上的图像上使用负片来获得此效果，margin-left并使用将图像置于 div 的中心margin-right。auto

这是一个示例小提琴，我在其中执行此操作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>

于 2013-10-07T11:58:41.390 回答