Как сделать значение 1 CSS зависит от другого?

0

Я пытаюсь сделать заголовок с тремя разделами. (весь раздел выровнен по горизонтали). Я хочу, чтобы средняя часть настраивалась в зависимости от размера содержимого (текста) внутри него. Когда я настраиваю этот средний размер, я хочу, чтобы остальные два настроили соответственно, чтобы три секции всегда занимали всю ширину сайта и оставались ровными. мой сайт шириной 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">&nbsp;</div>
            <div id="header_text"> Header text</div>
            <div class="side_header">&nbsp;</div>
        </div>

РЕШЕНИЕ: Использование javascript для создания зависимых значений может быть проблематичным и может привести к ошибкам. Лучше использовать css perpricessor как.less или.sass

  • 1
    Вы должны также взглянуть на меньшее. Это прекомпилятор CSS, который позволяет вам определять переменные и выполнять вычисления внутри вашего CSS-кода. Затем этот Less-Css компилируется в «настоящий» CSS. На клиенте не требуется Javascript. lesscss.org/features/#features-overview-feature-variables
  • 0
    Абсолютно идеально! Это именно то, что мне было нужно. Спасибо!! .less поддерживается всеми браузерами, верно? И в чем разница между .less и .sass?
Показать ещё 2 комментария
Теги:

2 ответа

0
Лучший ответ

Не получил то, что вы точно хотите сделать, но просто имейте в виду, что $.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 для достижения этого.

Поделиться
  • 0
    Это не сработало, не могли бы вы проверить мой вопрос еще раз? Я добавил HTML и CSS. Кроме того, я решил не использовать определенную ширину страницы, я хочу, чтобы заголовок занимал всю страницу. Единственное отличие заключается в использовании $ (document) .css ("width") вместо 1000, верно?
  • 0
    Кроме того, если я использую предпочтения (что я могу сделать), как я могу использовать js для автоматической настройки боковых заголовков, если я изменяю ширину% центрального заголовка. у меня это делает (100% - $ ("# header_text"). width ()) / 2, но это не работает
Показать ещё 3 комментария
2

Вы пытаетесь установить ширину в строку. Пытаться

<script>
$(document).ready(function () {
    $(".side_header").css("width", ($(document).css("width") - $("#header_text").css("width")) * .5);  
})
</script>
Поделиться
  • 1
    Не должно ли быть где-то 1000? И блок ...
  • 0
    Что делать, если я хотел, чтобы заголовок растягивал весь экран. как я могу сделать: ширина экрана минус ширина центра, раз .5
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню