Question

在页脚部分，我有一个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中是否可以有相同的垂直线？需要一个解决的链接来展示它是如何实现的。

Answer 1

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

Answer 2

您可以在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;}

Answer 3

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

假设你的标记是这样的：

<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

Answer 4

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

Answer 5

如果你的列是固定高度，你有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>

Answer 6

您是否尝试过这样的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>

CSS中等高的垂直线

6 个答案: