나는 그것이 성장함에 따라 레이아웃을 만들기 위해 노력하고있어 컨테이너 크기

Question

와 다른 두 요소 사이의 요소를 성장하는 것은이 수행합니다

 
    AB 
    AABB 
    AAABBB 
AAA==BBB 
AAA====BBB 

을 그리고 그것은 까다로운 증명입니다.

필자는 지금까지 두 가지 방법, 인라인 블록 및 테이블을 사용해 보았습니다. A과 B의 성장을 맞출 수는 있지만 총 너비가 설정치에 도달하면 =을 성장시킬 수 없습니다.

이것은 내가 가지고있는 것이며, http://jsfiddle.net/cd7sW/에도 있습니다.

<div id="page"> 

    <table id="container1"> 
     <tr><td colspan="3"><pre contenteditable="true">yada yada...</pre></td></tr> 
     <tr><td id="a">&nbsp;</td><td id="middle1">&nbsp;</td><td id="b">&nbsp;</td></tr> 
    </table> 

    <div id="container2"> 
     <pre contenteditable="true">yada yada...</pre> 
     <span id="c">&nbsp;</span><span id="middle2">&nbsp;</span><span id="d">&nbsp;</span> 
    </div> 

</div>​ 


#page { 
    text-align: center; 
    width:100%; 
} 
#container1 { 
    margin: 0 auto; 
    border-spacing:0; 
} 
#a, #b { 
    max-width:100px; 
} 
#a { 
    background-color:red; 
} 
#b { 
    background-color:blue; 
} 
#middle1 { 
    width: 0; 
} 

#container2 { 
    display:inline-block; 
    margin: 0 auto; 
} 
#c, #d { 
    display:inline-block; 
    width:50%; 
    height:1em; 
    max-width:100px; 
} 
#c { 
    background-color:red; 
} 
#d { 
    background-color:blue; 
} 
#middle2 { 
    display:inline-block; 
    width:0; 
    min-width: 0; 
} 

A 및 B 성장하고 올바르게 성장 중지하는 것이

당신은 당신이 내 두 번째 예제에 입력하면 볼 수있다 (이의 contentEditable입니다). 첫 번째 문제는 세포가 서로 독립적으로 성장할 수 없다는 것입니다.

어떻게 할 수 있습니까?

Answer 1

나는 이것이 당신이 염두에 두었던 것이 더 많거나 적기를 희망합니다. 이것은 jQuery 구현입니다.

근무 예 : http://jsfiddle.net/uK4Vt/1/

HTML

<button>Grow!</button> 
<div class="wrap"> 
    <div class="a"></div> 
    <div class="middle">Peekaboo!</div> 
    <div class="b"></div> 
</div>​ 

CSS

.wrap { 
    border: 1px green solid; 
    width: 60px; 
    height: 30px; 
    margin: 0 auto; 
} 

.a { 
    background-color: red; 
    min-width: 30px; 
    max-width: 90px; 
    width: 50%; 
    height: 30px; 
    float: left; 
} 

.b { 
    background-color: blue; 
    min-width: 30px; 
    max-width: 90px; 
    width: 50%; 
    height: 30px; 
    float: right; 
} 

.middle { 
    background-color: orange; 
    overflow: hidden; 
    width: 0; 
    height: 30px; 
    float: left; 
    text-align: center; 
} 

자바 스크립트

$('button').click(function() { 
    $(".wrap").css("width", "+=10px"); 
    $(".middle").css("width", $(".wrap").width() - 180 + 'px'); 
});