列之間的邊框css

如何在我創建的列之間繪製垂直邊框（類似報紙）？我也打算在css3中寫這個。列之間的邊框css

#contentBox 
{ 
    margin: 0 auto; 
    width: 80%; 
} 

#contentBox .article 
{ 
    float: left; 
    margin: 0; 
    width: 50%; 
    border-right: solid; 
}

然後HAML：

#contentBox 
    .article 
    %p text 
    .article 
    %p text

來源

2016-01-13 Liroy

哪裏HTML你提到？ – Aaron

哈姆在那裏... – Liroy

你可以從http://alistapart.com/article/fauxcolumns激發自己，並使用漸變代替，也可以使用絕對僞代碼......實際上可以使用的許多方法 –

作爲評論的，2簡單選擇：

1）僞

#contentBox { 
 
    margin: 0 auto; 
 
    width: 80%; 
 
    overflow: hidden; 
 
    /* wraps floatting element */ 
 
    } 
 
    #contentBox .article { 
 
    float: left; 
 
    margin: 0; 
 
    width: 50%; 
 
    } 
 
    /* test */ 
 
    #contentBox .article { 
 
    height: 300px; 
 
    background: rgba(0, 0, 0, 0.2); 
 
    } 
 
    #contentBox .article:nth-child(1) { 
 
    height: 200px; 
 
    } 
 
    /* pseudo option */ 
 
    #contentBox { 
 
    position: relative; 
 
    } 
 
    #contentBox:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0; 
 
    bottom: 0; 
 
    border-left: 1px solid; 
 
    }

<div id='contentBox'> 
 
    <div class='article'></div> 
 
    <div class='article'></div> 
 
</div>

http://codepen.io/anon/pen/JGyJLo

2）背景圖像（測試線性梯度）舊固體方法描述here

#contentBox { 
 
    margin: 0 auto; 
 
    width: 80%; 
 
    overflow: hidden; 
 
    /* wraps floatting element */ 
 
    } 
 
    #contentBox .article { 
 
    float: left; 
 
    margin: 0; 
 
    width: 50%; 
 
    } 
 
    /* test */ 
 
    #contentBox .article { 
 
    height: 300px; 
 
    background: rgba(0, 0, 0, 0.2);/* to see just because they might have different height */ 
 
    } 
 
    #contentBox .article:nth-child(1) { 
 
    height: 200px; 
 
    } 
 
    #contentBox { 
 
    background: linear-gradient(to left, transparent 49.95%, black 49.95%, black 50%, transparent 50%) 
 
    }

<div id='contentBox'> 
 
    <div class='article'></div> 
 
    <div class='article'></div> 
 
</div>

http://codepen.io/anon/pen/VezWMe

來源

2016-01-13 16:01:00

添加以下行到你的CSS：

#contentBox .article 
{ 
    border-right-style: solid; 
    border-right-color: #CCC; 
    border-right-width: thin; 
}

來源

2016-01-13 15:42:14

邊框會出現，但會消除列 - 創建一個長列而不是兩個。 – Liroy

float is there ... – Liroy

你的div的文字太寬了。爲了適應contentBox，請降低它們的百分比。 –

邊界是有，只是因爲它是一個塊元素，因此邊框由邊緣顯示屏幕你可以做display: inline
這裏是一個jsfiddle https://jsfiddle.net/kpx1tqf6/1/

來源

2016-01-13 15:44:54

爲百分比寬度和邊框的使用添加框尺寸。

然後將邊框應用到第一篇文章，以便用一行分隔它們。

* { 
 
    box-sizing: border-box; 
 
} 
 
#contentBox { 
 
    margin: 0 auto; 
 
    width: 80%; 
 
} 
 
#contentBox article { 
 
    float: left; 
 
    margin: 0; 
 
    width: 50%; 
 
    height: 600px; /* DEMO HEIGHT */ 
 
} 
 
#contentBox article:first-child { 
 
    border-right: 2px solid red; 
 
}

<div id="contentBox"> 
 
    <article>Change the HTML article to any tag/element you would like to use...</article> 
 
    <article>Change the HTML article to any tag/element you would like to use...</article> 
 
</div>

來源

2016-01-13 15:49:21 Aaron

列之間的邊框css

回答

相關問題