0

在页脚部分，我有一个水平相邻的 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中是否有可能有相等的垂直线？需要一个已解决的链接来显示它是如何可能的。

4

6 回答 6

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>
于 2013-11-06T14:32:45.363 回答
0

不直接。但是您可以将包含线条的背景添加到包含您的列中。

于 2013-11-06T14:20:16.410 回答
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;}
于 2013-11-06T14:22:41.583 回答
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;
}

看演示

于 2013-11-06T14:24:20.517 回答
0

你的意思是在 StackOverflow 的页脚中吗？新的 HTML5 元素难道不能做到这一点吗？

于 2013-11-06T14:30:11.870 回答
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>
于 2013-11-06T14:43:20.293 回答