равная высота вертикальная линия в CSS

Question

В разделе нижнего колонтитула у меня есть 3 divs (со ссылками) рядом друг с другом по горизонтали (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

Если ваши столбцы имеют фиксированную высоту, у вас есть метод Маниш-Мишры. Если ваши столбцы должны соответствовать высоте его содержимого, у вас есть метод 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 2

Непосредственно. Но вы можете добавить фон, содержащий строки, к содержащим ваши столбцы.

Answer 3

Вы можете поместить уникальный разделительный элемент с фиксированной высотой между делителями.

как:

<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 4

Поскольку вы не предоставили разметку, я могу только предположить, что, следовательно, попробуйте следующее:

предположим, что ваша разметка выглядит так:

<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 5

ли вы имеете в виду что-то вроде в сноске StackOverflow? Разве это невозможно с новыми элементами HTML5?

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 Sample

<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>