Сделать DIV-автозаполнение пространства - PullRequest
Новая
       22

Сделать DIV-автозаполнение пространства

2 голосов
/ 04 июля 2011

Итак, я пытался выяснить проблему с моим дивом здесь;как перевести мой дизайн в реальный макет, и мне не очень повезло с исследованиями или реализацией.В прикрепленной ссылке, где вы видите // ПОРТФОЛИО и затем линию, продолжающуюся до края области содержимого, есть красная линия.Прямо сейчас у меня есть оба элемента div: // PORTFOLIO и красная линия, настроенные на определенную ширину пикселя, но я хочу, чтобы оба элемента div автоматически устанавливали их ширину (первый, который автоматически устанавливает ширину в зависимости от того, сколько //TITLE занимает, а вторая заполняет оставшееся пространство в контейнере), так как другие разделы сайта будут делать то же самое, и я не хочу измерять конкретно для каждой области.Любые предложения приветствуются, большое спасибо!

Пример

Ответы [ 2 ]

8 голосов
/ 04 июля 2011

См .: http://jsfiddle.net/GmtMK/1/ (изменить ширину окна браузера) 

<div id="columnA">
    <div id="title">//Portfolio</div>
    <div id="line"></div>
</div>

#columnA {
    font-family: 'ProximaNovaRegular', Geneva, sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    color: #C10000;
    margin-bottom: 20px;
    letter-spacing: 4pt;
}
#title {
    float: left
}
#line {
    overflow: hidden;
    height: 9px;
    border-bottom: 1px solid #c10000;
}
2 голосов
/ 04 июля 2011

Во-первых, позвольте мне дополнить вас на вашем сайте, это выглядит красиво и стильно!Во-вторых, у меня есть решение для вас, использующее свойство display: table css, однако оно требует добавления элемента <hr />, если оно не позволяет иметь ячейки неравной высоты: 

<div id="columnA">
    <div id="title">//Portfolio</div>
    <div id="line"><hr /></div>
</div>

#columnA {
  width: 400px;
  display:table;
}
#title {
  display:table-cell;
  width: 175px;
}
#line {
  display:table-cell;
  width: auto;
}
hr { 
  background-color: #C10000;
  height: 1px;
  border: 0;
}

Пожалуйста, смотритеполный пример: http://jsfiddle.net/GmtMK/

...