CSS устанавливается ширина первого элемента на основе ширины второго элемента

я не уверен, как именно работать, что я пытаюсь сделать так, медведь со мной ...CSS устанавливается ширина первого элемента на основе ширины второго элемента

Я пытаюсь установить ширину элемента, основанного на ширине обрабатывающего элемента. визуально это будет выглядеть следующим образом:

container element 
-------------------------------------------- 
|       |    | 
|       |    | 
|<--auto width for div1-->|<--div2 200px-->| 
|       |    | 
|       |    | 
--------------------------------------------

Таким образом, по существу, div2 устанавливается всплывать на правой части страницы, и div1 должны охватывать до правого края div2 автоматически

Я начал скрипку на: http://jsfiddle.net/yUvJs/

Любая помощь будет принята с благодарностью ... заранее спасибо ...

источник

2013-05-02 sadmicrowave

Почему нет div2 внутри див1. Span div1 100% и придать ему padding-right, аналогичный ширине div2. Есть ли существенная причина, чтобы настроить его так, как вы пытаетесь. http://jsfiddle.net/yUvJs/4/ – Daniel

Я не уверен, где ответ, предлагающий использовать метод css3 calc(), но он просто взорвал мой разум! пожалуйста, отправьте его – sadmicrowave

Просто используйте столы. Избавьтесь от float, установите два боковых поля на display:table-cell и контейнер div до display:table. Первый блок затем должен автоматически настроить ширину в зависимости от ширины второго блока.

Fiddle example

источник

2013-05-02 20:12:35

Это похоже, точно соответствует потребностям OP. Хорошая мысль. – 2to1mux

Вы можете использовать функцию calc() который является новым в CSS 3, чтобы первый <div> диапазона 100% ширина его содержащего блока минус 200px второго <div> - только не забудьте объяснить 2px границы на каждом дочернем элементе:

#box1 { 
display:inline-block; 
border:1px dashed blue; 
height:100%; 
opacity:.8; 
background:#ccc; 
width: -webkit-calc(100% - 204px); 
width: -moz-calc(100% - 204px); 
width: calc(100% - 204px); /* 2px + 2px dotted border */ 
}

Example

источник

2013-05-02 19:32:09 Misanthrope

Исправьте меня, если я ошибаюсь, но это, по-видимому, требует, чтобы один из них предоставлял ширину последующего элемента (div2) статически. Кажется, что OP хочет иметь возможность изменять ширину div1 в зависимости от ширины div2 динамически. – 2to1mux

'' Я не уверен, где ответ, предлагающий использовать метод css3 calc(), но он просто взорвал мой разум, пожалуйста, отправьте его «' - Переизданный – Misanthrope

Это круто, для OP @sadmicrowave tho вам придется беспокоиться о IE8? http://dochub.io/#css/calc –

Я предлагаю реализации этого в JavaScript. Вы бы сделать что-то вроде этого в JavaScript:

var cont = document.getElementById("container"); 
var box2 = document.getElementById("box2"); 
var box1Width = cont.offsetWidth - box2.offsetWidth; 
document.getElementById("box1").style.width = box1Width + "px" ;

Я реализовал это на скрипке с парой небольших изменений, чтобы продемонстрировать, что он работает. Проверьте это: http://jsfiddle.net/yUvJs/26/

источник

2013-05-02 19:50:17 2to1mux

Извините, но я хотел бы реализовать это с помощью CSS – sadmicrowave

Так я бы это сделал, для CSS3 calc вы не сможете поддерживать IE8 http://dochub.io/#css/calc –

Я не уверен, все ваши требования, но если вы можете полностью изменить HTML порядок:

<div id='container'> 
    <div class='box' id='box2'></div> 
    <div class='box' id='box1'></div> 
</div>

И удалить display: inline-block (которые не должны быть необходимы, когда плавающая), но примените overflow: hidden (and its magic) к box1, тогда вы получите то, что хотите, как видно из this fiddle.

источник

2013-05-02 19:54:02 ScottS

CSS устанавливается ширина первого элемента на основе ширины второго элемента

ответ

Смежные вопросы