設置周圍的幾個div的

邊框

我打得周圍設置邊框以下的div：

<div style="border:1px solid black;" class="inner"> 
    <div style="padding-bottom: 14px;border:1px solid black;" class="title">

結果看起來像以下：

我想讓它看起來像：

如何正確設置div的任何建議？或者，設計一個背景圖像以適合盒子會更好嗎？

我很感謝你的回覆！

來源

2016-09-19 mrquad

您提供的鏈接無效。 –

如果你不使用圖片，你必須刻意設置每個div的邊框，以便整個單元的邊框厚度是統一的 –

你將需要顯示更多代碼以獲得有用的答案。你的容器div應該包含所有的子元素，你很可能需要「清除」它們。嘗試創建一個jsfiddle來展示你的問題並分享它。 – James

您可以使用table而不是您可見的單元格邊界的DIV。

或對於DIV使用display: table,display: table-row和display: table-cell，同樣爲單元元素定義邊界。

來源

2016-09-19 13:20:45 Johannes

用於佈局的表格通常是不被接受的。 – James

Thx爲您的回覆！我更新了鏈接！ – mrquad

將四個邊框放在容器上，然後在每個小孩中添加border-bottom，除了最後一個。

.container-bordered { 
    border: 2px solid red; 
} 

.container-bordered > div:not(:last-of-type) { 
    border-bottom: 2px solid red; 
}

https://jsfiddle.net/cqjxuype/

來源

2016-09-19 13:25:20

這是一個5分鐘的CSS解決方案：

* { 
 
    box-sizing: border-box; 
 
    font-family: sans-serif; 
 
} 
 

 
.product { 
 
    border: 2px solid #999; 
 
    border-radius: 2px; 
 
    width: 20em; 
 
} 
 

 
.product--header, 
 
.product--image, 
 
.product--rating { 
 
    width: 100%; 
 
    border-bottom: 2px solid #999; 
 
} 
 

 
.product--header h2, .product--header h3 { 
 
    text-align: center; 
 
    padding: 0.25em 0 0.5em; 
 
    margin: 0; 
 
} 
 

 
.product--image img { 
 
    width: 100%; 
 
    padding: 0.25em; 
 
    z-index: 1; 
 
} 
 

 
.product--image { 
 
    position: relative; 
 
} 
 

 
.product--pricetag { 
 
    position: absolute; 
 
    z-index: 2; 
 
    left: 0; 
 
    top: 1em; 
 
    color: white; 
 
    background: rgba(0, 0, 0, 0.75); 
 
    text-align: center; 
 
    width: 40%; 
 
    padding: 0.5em; 
 
} 
 

 
.product--rating p { 
 
    text-align: center; 
 
} 
 

 
.product--links { 
 
    width: 100%; 
 
    margin: 0.5em; 
 
} 
 

 
.product--links a.btn { 
 
    display: block; 
 
    color: white; 
 
    background: blue; 
 
    text-align: center; 
 
    width: 90%; 
 
    margin-left: 2.5%; 
 
    padding: 0.5em; 
 
    margin-bottom: 0.25em; 
 
}

<div class="product"> 
 
    <div class="product--header"> 
 
    <h2>Test Product</h2> 
 
    <h3>Price Class: $$ | P3 | 14</h3> 
 
    </div> 
 
    <div class="product--image"> 
 
    <img src="http://placekitten.com/200/200" alt="cat"> 
 
    <p class="product--pricetag"> 
 
     999 $ 
 
    </p> 
 
    </div> 
 
    <div class="product--rating"> 
 
    <p>Rating: 4/5</p> 
 
    </div> 
 
    <p class="product--links"> 
 
    <a class="btn">Buy on Amazon</a> 
 
    <a class="btn">Other Sizes</a> 
 
    </p> 
 
</div>

我不會推薦一個背景幀圖像，因爲它是一個痛苦的工作與加載它是浪費帶寬。

來源

2016-09-19 13:46:12

設置周圍的幾個div的

回答

相關問題