reduce div width, wenn Geschwister expandiert

Question

Ich habe zwei divs nebeneinander in einem Elternteil div - das linke div wird Text enthalten, während das rechte div ein Bild enthält, und auf Knopfdruck kann das rechte div expandieren oder reduzieren zurück zu seiner ursprünglichen Breite.

<style> 
.parent{ 
    width: 100%; 
    border: 1px solid blue; 
    padding: 2px; 
    float: left; 
} 
.left{ 
    width: 60%; 
    float: left; 
    border: 1px solid red; 
} 
.right{ 
    width: 38%; 
    border: 1px solid orange; 
    float: right; 
} 
</style> 

<input type="submit" class="toggle_div" id="button1" value="Expand"/><br> 
<div class="parent"> 
    <div class="left">Left Content</div> 
    <div class="right">Right Content</div> 
</div> 

Javascript zu erweitern/reduzieren die div:

$("#button1").click(function(){ 
    var inputValue=$("#button1").attr('value'); 

    if(inputValue=="Expand") 
    { 
     $(".right").animate({width:"60%"}); 
     $("#button1").attr('value','Reduce'); 
    } 
    else if(inputValue=="Reduce") 
    { 
     $(".right").animate({width:"38%"}); 
     $("#button1").attr('value','Expand'); 
    } 
}); 

Gerade jetzt, wenn ich die Breite des rechten div erhöhen, ist es unter dem linken div gleitet. Aber was ich will, ist, dass das linke div entsprechend verkleinert wird und die verbleibende Breite innerhalb des Elternteils annimmt, wobei linkes und rechtes div Seite an Seite übrig bleiben.

JSFiddle

Meine CSS ist schwach, und ich vermute, das ist etwas, das ich in CSS tun können, ohne Javascript zu verwenden, das die linke div auch zu ändern. Vorschläge geschätzt wie immer.

Answer 1

Hier versuchen, funktioniert das? http://jsfiddle.net/CFNUJ/917/ die #right-bg { aufhalten zum #left-bg

die ersten ist mit nur CSS

Answer 2

Ihre links div war einfach nicht in der richtigen Größe aktualisiert, so dass Ihre Behälter mehr als 100% war.

$("#button1").click(function(){ 
 
    var inputValue=$("#button1").attr('value'); 
 
    
 
    if(inputValue=="Expand") 
 
    { 
 
     $(".right").animate({width:"60%"}); 
 
     $(".left").animate({width:"38%"}); 
 
     $("#button1").attr('value','Reduce'); 
 
    } 
 
    else if(inputValue=="Reduce") 
 
    { 
 
     $(".right").animate({width:"38%"}); 
 
     $(".left").animate({width:"60%"}); 
 
     $("#button1").attr('value','Expand'); 
 
    } 
 
});

.parent{ 
 
    width: 100%; 
 
    border: 1px solid blue; 
 
    padding: 2px; 
 
    float: left; 
 
} 
 
.left{ 
 
    width: 60%; 
 
    float: left; 
 
    border: 1px solid red; 
 
} 
 

 
.right{ 
 
    width: 38%; 
 
    border: 1px solid orange; 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="submit" class="toggle_div" id="button1" value="Expand"/><br> 
 
<div class="parent"> 
 
<div class="left">Left Content</div> 
 
<div class="right">Right Content</div> 
 
</div>

Answer 3

nicht wirklich gut selbst, aber vielleicht so etwas wie http://jsfiddle.net/fd9pos8m/: Ich habe es hier festgelegt? nicht glatt aber

<div style="padding:2px; width:500px; background: #FFFFFF "> 
    <div class="left" style="float:left; width:50%; background: #ff0000 ">Left Content</div> 
    <div class="right" style="margin-left:52%; width:38%; background: #000000 ">Right</div> 
    <div style="clear:both"></div> 

    <input type="button" id="button1" value="expand"> 
</div> 
<script> 
$('#button1').click(function(){ 
      var val = $(this).val(); 
      if(val == 'expand') { 
       $('.right').animate({width:'60%'}); 
       $(this).val('reduce'); 
      } else { 
       $('.right').animate({width:'38%'}); 
       $(this).val('expand'); 
      } 
     }); 
</script> 

Answer 4

Wie wäre es mit css flexbox? Sie müssen sich keine Gedanken darüber machen. .left oder .right springt nach unten, wenn nicht genug Platz für sie ist, es behandelt nur diese Situation für Sie.

Denken Sie daran, die Browser-Unterstützung für flexbox zu überprüfen.

ich gezwickt nur die CSS:

.parent{ 
    width: 100%; 
    border: 1px solid blue; 
    padding: 2px; 
    display: flex; 
} 
.left{ 
    width: 60%; 
    border: 1px solid red; 
} 

.right{ 
    width: 38%; 
    border: 1px solid orange; 
} 

jsfiddle http://jsfiddle.net/sen3t6vk/74/