Я пытаюсь сделать заголовок с тремя разделами. (весь раздел выровнен по горизонтали). Я хочу, чтобы средняя часть настраивалась в зависимости от размера содержимого (текста) внутри него. Когда я настраиваю этот средний размер, я хочу, чтобы остальные два настроили соответственно, чтобы три секции всегда занимали всю ширину сайта и оставались ровными. мой сайт шириной 1000 пикселей, вот как я его настроил
< div .side_header> < div #header> < div .side_header>
Я хочу создать скрипт, который говорит что-то вроде: "ширина.side_header равна (1000px минус ширина #header) *. 5" Это то, что я написал, но мой синтаксис выключен:
<script>
$(document).ready(function () {
$(".side_header").css("width", "$("#header_text").css("width") * .5");
})
</script>
CSS:
#title{
}
.side_header{
display:inline-block;
background-color:#999;
}
#header_text{
display:inline-block;
background-color:#3FF;
}
HTML:
<div id="title">
<div class="side_header"> </div>
<div id="header_text"> Header text</div>
<div class="side_header"> </div>
</div>
РЕШЕНИЕ: Использование javascript для создания зависимых значений может быть проблематичным и может привести к ошибкам. Лучше использовать css perpricessor как.less или.sass
Не получил то, что вы точно хотите сделать, но просто имейте в виду, что $.css("width") возвращает ширину CSS элемента, а не фактическую ширину. Поэтому, если вы пытаетесь установить ширину боковых панелей, чтобы занять оставшуюся доступную для них ширину страницы, вы должны использовать $.width() для чтения средней ширины div.
$(".side_header").css("width",((1000 - $("#header_text").width())/2) + 'px');
Еще лучше использовать.outerWidth() как CSS, они могут быть разными. Вы можете найти документы о них на следующих страницах:
http://api.jquery.com/width/
http://api.jquery.com/outerwidth/
Но ведь если вы хотите поместить какой-то div горизонтально, это не очень хорошая стратегия. метод width() также работает как-то неудовлетворительно, так как ваш стиль CSS может быть таким, который влияет на среднюю ширину div. Использование сплошной процентной ширины более стабильно, чем использование JS для достижения этого.
Вы пытаетесь установить ширину в строку. Пытаться
<script>
$(document).ready(function () {
$(".side_header").css("width", ($(document).css("width") - $("#header_text").css("width")) * .5);
})
</script>