Установка ширины HTML-дивов с помощью% s - PullRequest
Новая
       4

Установка ширины HTML-дивов с помощью% s

0 голосов
/ 15 ноября 2010

Вот соответствующий HTML: 

    <div class="row">
        <div class="arrow box">&#9668;</div>Month Year<div class="dayMonth box"></div>&#9658;<div class="arrow box"></div>
    </div>

Вот css, на который ссылается HTML-файл, на который ссылается вышеупомянутый HTML-код: 

*
{
    margin: 0; 
    padding: 0; 
} 

body
{
    font-family: "Times New Roman"; 
    font-size: 12pt; 

} 

.dayMonth
{
    width: 80%; 
}

.arrow
{ 
    width: 10%; 
}

.row
{
    width: 58em; 
    background-color: gray; 
    margin-right: auto; 
    margin-left: auto; 
}

.box
{
    float: left; 
    text-align: center; 
}

Это вывод:

see description

«Строка» центрируется в браузере вправо, но содержимое внутри него (две стрелки и месяц месяца) не выполняет то, что я хочу.

Я думаю, что это должно быть сделано, потому что есть две стрелки, и их ширина равна 10%, а затем ширина dayMonth равна 80%, что все элементы div должны занимать всю «строку» (потому что они сумме до 100%), и что текст «Месяц Год» должен быть центрирован в «строке», потому что класс .dayMonth css говорит, что он должен быть центрирован в своем div, и потому что его div должен быть центром 80% «строки» , Это, очевидно, не происходит, хотя.

Я не хочу другого решения (как такового). Я хочу знать, почему код, который я написал, не выражает идею, которую я хочу выразить, не работает так, как я хочу.

Я думаю, что я неправильно понимаю, как% управляет шириной. http://www.w3schools.com/css/pr_dim_width.asp говорит, что% '«определяет ширину в процентах от содержащего блока», хотя и похоже, что %'s должен делать то, что я намереваюсь сделать, поэтому я полностью запутался.

Где я ошибся?

Ответы [ 4 ]

2 голосов
/ 15 ноября 2010

Это прекрасно работает для меня в Опере.

Я заметил, что у вас есть "Месяц Год" за пределами <div>. Попробуйте положить его внутрь и посмотреть, исправит ли это.

Редактировать
И снова с последней стрелкой, она также находится за пределами тега <div>.

Ваш HTML должен быть таким: 

<code><div class="row">
    <div class="arrow box">&#9668;</div><div class="dayMonth box">Month Year</div><div class="arrow box">&#9658;</div>
</div>

Кроме того, после того, как вы это сделаете, строка <div> не будет иметь высоту, поэтому вы можете явно установить высоту (попробуйте 20px).

1 голос
/ 15 ноября 2010

Во-первых, ваша разметка неверна, поэтому вы видите проблемы.Это связано с тем, что содержимое находится не в элементах div, а вне их, что вызывает проблемы с высотой всплывающих элементов.

Вот исправленная работа:

http://jsbin.com/ezari4/edit

1 голос
/ 15 ноября 2010 
<div class="row">
    <div class="arrow box">&#9668;</div><div class="dayMonth box">Month Year</div><div class="arrow box">&#9658;</div>
</div>

Попробуйте код, подобный этому, с содержимым внутри div. Работал для меня в FF, IE7 / 8 и Chrome. Возможно, вы захотите использовать шестнадцатеричное значение для цвета .row, например # 333333 - цвет не отображался для меня ни в одном браузере, кроме IE7.

1 голос
/ 15 ноября 2010

Как только я исправлю ваш HTML, он отлично работает для меня в FF.У вас есть пустые элементы div, а год месяца и стрелка влево находятся не в соответствующих элементах div.

Я понял это очень быстро, когда использовал firebug.Вы должны отлаживать, используя Firebug или инструменты разработчика Chrome.

...