CSS中等高的垂直线

时间:2013-11-06 14:16:35

标签: html css css3

在页脚部分,我有一个3个div(带链接)水平相邻(float:left;)。

每个div都有不同数量的链接。例如,

   Div1           Div2              Div3  
|  Contact    |   Feedback      |   Support Center
|  Delivery   |   Bonus Points  |   Order Notes
              |   Team          |   Newsletter
              |   Service  

这里Div1只有2个链接,左侧垂直线很短。 Div2有4个链接,垂直线很大,div3有3个链接,根据链接太短。

我的CSS有以下内容,

#footer_verticalLineSeparator {
border-left: 1px solid #CCCCCC;
height: 100%;
}

但我需要所有垂直线需要相同的高度而不是添加图像。它需要如下所示。

   Div1           Div2              Div3  
|  Contact    |   Feedback      |   Support Center
|  Delivery   |   Bonus Points  |   Order Notes
|             |   Team          |   Newsletter
|             |   Service       |
|             |                 |

CSS中是否可以有相同的垂直线?需要一个解决的链接来展示它是如何实现的。

6 个答案:

答案 0 :(得分:0)

不直接。但是,您可以添加包含行的背景到包含列。

答案 1 :(得分:0)

您可以在div之间放置一个固定高度的唯一分隔符元素。

像:

<div class="wrapper">
    <div class="menuBox"></div>
    <div class="seperator"></div>
    <div class="menuBox"></div>
    <div class="seperator"></div>
    <div class="menuBox"></div>
    <div class="endFloats">
</div>

的CSS:

.menuBox{display:inline-block;float:left;width:300px}
.seperator{display:inline-block;float:left; width:1px; border:1px solid #000}
.endFloats{display:block; height:1px; clear:both; line-height:1px;}

答案 2 :(得分:0)

由于你没有提供你的标记,我只能假设尝试这个:

假设你的标记是这样的:

<div class="footer">
    <div class="footerSection">
        <ul>
            <li><a href='#' >Contact </a></li>
            <li><a href='#' >Delivery </a></li>
        </ul>
    </div>
    <div class="footerSection">
       <ul>
            <li><a href='#' >FeedBack</a></li>
            <li><a href='#' >Bonus Points</a></li>
            <li><a href='#' >Team </a></li>
            <li><a href='#' >Service </a></li>
        </ul>
    </div>
    <div class="footerSection">
        <ul>
            <li><a href='#' >Support Center </a><li>
            <li><a href='#' >Order Notes </a></li>
            <li><a href='#' >NewsLetter</a></li>
        </ul>
    </div>
    <div style="clear:both">
    </div>
</div>

让你的css像这样:

.footer{
    min-width:500px;
    border:1px solid #CCC;
    text-align:center;
    padding:0;
    margin:0;
}
.footerSection{
    border-right:1px solid #CCC;
    min-height:140px;
    width:30%;
    padding:0;
    margin:0;
    float:left;
}
.footerSection:last-child{
    border:none;
}
.footerSection ul {
   list-style:none;
    padding:0;
    margin:0;
}

请参阅demo

答案 3 :(得分:0)

你的意思是像StackOverflow的页脚吗?新的HTML5元素不可能吗?

答案 4 :(得分:0)

如果你的列是固定高度,你有Manish Mishra的方法。如果您的列必须遵循其内容的高度,则使用table-cell方法。

http://jsfiddle.net/xFSe8/

.cont-2 {
    display:table;
}

.cont-2 .col {
    display:table-cell;
    border-left:1px solid black;
    width:200px;
}

<div class = "cont-2">
    <div class = "col col-1">
        <a>Apple</a>
        <a>Orange</a>
        <a>Peach</a>
    </div>

    <div class = "col col-2">
        <a>Pikachu</a>
    </div>

    <div class = "col col-3">
        <a>Apple</a>
        <a>Orange</a>
        <a>Peach</a>
        <a>Tomato</a>
    </div>
</div>

答案 5 :(得分:0)

您是否尝试过这样的CSS?

.footer {
    display: table;
    width: 540px;
    height: 150px;
    border-collapse:collapse;
}

.pane {
    display: table-cell;
    border-left:1px dashed #000;
    padding-left: 30px;
    width: 180px;
}

HTML示例

<div class="footer">
    <div class="pane">
        <p>Contact</p>
        <p>Delivery</p>
    </div>
    <div class="pane">
        <p>Feedback</p>
        <p>Bonus Points</p>
        <p>Team</p>
        <p>Service</p>
    </div>
    <div class="pane">
        <p>Support Center</p>
        <p>Order Notes</p>
        <p>Newsletter</p>
    </div>
</div>