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

Question

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

0

В разделе нижнего колонтитула у меня есть 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 иметь равную вертикальную линию? Нужна решенная связь, чтобы показать, как это возможно.

kuttyraj 06 нояб. 2013, в 15:43

Источник

0

самое простое - сделать их все одинаковой фиксированной высоты
Elen 06 нояб. 2013, в 14:20

Теги:

html

css

css3

6 ответов

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>

Alice 06 нояб. 2013, в 13:04

0

Вы можете поместить уникальный разделитель elemnt с фиксированной высотой между 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;}

Gal Samuel 06 нояб. 2013, в 12:59

0

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

Heinrich 06 нояб. 2013, в 12:45

0

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

joostmakaay 06 нояб. 2013, в 12:19

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

посмотреть демоверсию

Manish Mishra 06 нояб. 2013, в 11:31

Ещё вопросы

самое простое - сделать их все одинаковой фиксированной высоты

TreeTree · Accepted Answer · 2013-11-06T12-50-00.000Z

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

Спасибо за все. Многие из их решений верны. @TreeTree большое спасибо .. Я попробовал один за другим .. это работает хорошо от вашего решения.