Растянуть div на полную ширину (если есть место) - PullRequest
Новая
       5

Растянуть div на полную ширину (если есть место)

2 голосов
/ 09 марта 2012

В настоящее время я работаю над темой Tumblr, но застрял на странице навигации. HTML для кнопок «Предыдущий» и «Следующий» или отображается только, если они доступны. Таким образом, на первой странице нет следующей кнопки и на последней странице нет предыдущей кнопки. и это где я хочу, чтобы соответствующая кнопка растягивалась до 100% ширины. Я мог бы сделать это в javascript, но это вообще не вариант, поскольку шаблон должен работать и без javascript.

HTML выглядит так: 

<div id="navigation">
<a href="#" id="prev" style="width:476px; float:left;" class="button_normal"><p>Prev</p></a>
<a href="#" id="next" style="width:476px; float:right;"class="button_normal"><p>Next</p></a>
</div>

CSS: 

.button_normal {
text-align: center;
opacity: 0.55;
height: 30px;
line-height: 30px;
background: white;
font-size: 13px;
font-weight: 100;
color: #646464;
border: 1px solid #646464;
text-decoration: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom: 10px;
}

#navigation{
clear: both;
width: 100%;
}

ширина родительского div равна 960px, поэтому между двумя кнопками должно быть поле в 8px. Я попытался исправить это с min-width и width: 100% auto; но не мог понять, как это сделать.

Заранее спасибо.

Ответы [ 2 ]

4 голосов
/ 09 марта 2012

Вы можете использовать стили отображения таблицы.

/* add these properties to your stylesheet */<br> #navigation { display:table; }<br> .button_normal { display:table-cell; }

// remove the inline styles from your anchors
<div id="navigation">
    <a href="#" id="prev" class="button_normal"><p>Prev</p></a>
    <a href="#" id="next" class="button_normal"><p>Next</p></a>
</div>

Пример: http://jsbin.com/unuwuh/2

3 голосов
/ 09 марта 2012

Вы можете сделать следующее:

  1. Добавить position:relative в родительский контейнер

  2. Создать новый класс с именем "full-width" и в нем

    position: absolute;
left:0px;
right:0px;

  3. Добавьте класс full-width к соответствующей кнопке

...