durch ausgewählte Innen div

Question

Ich habe wie folgt aussieht ein html-Segment, das Bestimmen Breite Außen divs:

<div class="outer" style="min-width: 150px;"> 
    <div class="inner1"> 
     <span>Lorem ipsum dolor sit amet</span> // Can be very long, truncate as needed 
    <div class="inner2"/> 
</div> 

eine minimale Breite und kann/wird wachsen Die äußere div hat. Was ich will, ist so, dass die Breite des äußeren Teils wächst, während inner2 wächst, aber nicht für inner1. Mit anderen Worten, ich möchte, dass die Breite des äußeren Teils durch inner2 bestimmt wird, als ob inner1 nicht existiert, dann addiere inner1 und lasse die Breite unverändert, z.

Wenn die Breite von inner2 kleiner als 150px ist, beträgt die Breite von inner1 150px.

Wenn die Breite von inner2 größer als 150px ist, entspricht die Breite von inner1 der von inner2.

Answer 1

Sie benötigen JavaScript, um Ihr Ziel zu erreichen.

$(document).ready(function() { 
 
    var $outer = $('.outer'); 
 
    var $inner1 = $('.inner1'); 
 
    var $inner2 = $('.inner2'); 
 
    
 
     
 
    if ($inner2.width() > 150) { 
 
     $inner1.css('width', $inner2.width()+'px'); 
 
     $outer.css('width', $inner2.width()+'px'); 
 
    } 
 
    else 
 
    { 
 
     $outer.css('width', '150px'); 
 
    } 
 
});

.outer { 
 
    background-color: yellow; 
 
} 
 
.inner1 { 
 
    display: inline-block; 
 
    background-color: red; 
 
} 
 
.inner2 { 
 
    display: inline-block; 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer" style="min-width: 150px;"> 
 
    <div class="inner1"> 
 
     <span>Lorem ipsum dolor sit amet</span> // Can be very long, truncate as needed 
 
    </div> 
 
    <br /> 
 
    <div class="inner2"> 
 
    sadasda 
 
</div> 
 
</div>

Ich hoffe, das Sie Ihr Ziel erreichen hilft :)