Wie drei divs inline?

Question

div#left 
 
{ 
 
    width: 50px; 
 
    height: 80px; 
 
    float: left; 
 
    background: red; 
 
} 
 

 
div#right 
 
{ 
 
    width: 100%; 
 
    height: 80px; 
 
    float: left; 
 
    background: blue; 
 
} 
 

 
div#1 
 
{ 
 
    
 
}

<div id="left"> 
 
    <div id="1"></div> 
 
    <div id="2"></div> 
 
</div> 
 
<div id="right"> 
 
    <div id="3"></div> 
 
</div>

Ich habe 3 divs die Ich mag würde in einer Zeile setzen. Die ersten beiden haben eine bestimmte Breite. Der dritte sollte "automatisch" die Breite durch den Raum ändern.

Answer 1

Sie können dies mit calc Funktion in CSS tun. Fügen Sie einfach width: calc(100%- 50px) zu div#right

div#left 
 
{ 
 
    width: 50px; 
 
    height: 80px; 
 
    float: left; 
 
    background: red; 
 
} 
 

 
div#right 
 
{ 
 
    width: calc(100% - 50px); 
 
    height: 80px; 
 
    float: left; 
 
    background: blue; 
 
}

<div id="left"> 
 
    <div id="1"></div> 
 
    <div id="2"></div> 
 
</div> 
 
<div id="right"> 
 
    <div id="3"></div> 
 
</div>

Answer 2

Hallo Im Folgenden Code wird Ihnen helfen, Besuche

CSS

<style> 
.container { 
    display: flex; 
    } 
.red { 
    background: orangered; 
    flex-grow: 1; 
} 
.green { 
    background: yellowgreen; 
    width:100px; 
} 
.blue { 
    background: steelblue; 
    width:100px; 
} 
.container > div { 
    font-size: 5vw; 
    padding: .5em; 
    color: white; 
} 
</style> 

HTML

Answer 3

Sie können Flex verwenden, indem Sie flex:1 für das zweite div angeben, damit der verbleibende Speicherplatz belegt wird.

Um diese Eigenschaft zu verwenden, müssen Sie container für Ihre beiden Elemente festlegen und display:flex hinzufügen. Sie können mehr über flex layout lesen.

Übrigens müssen Sie die ID Ihrer Elemente beheben. Sie sollten vermeiden, Nummer als Anfang zu verwenden (es ist in HTML5 erlaubt, aber nach dem Testen funktioniert es hier nicht). Lesen Sie this.

.container { 
 
    display:flex; 
 
} 
 
div#left 
 
{ 
 
    width: 50px; 
 
    height: 80px; 
 
    background: red; 
 
} 
 

 
div#right 
 
{ 
 
    flex:1; 
 
    height: 80px; 
 
    background: blue; 
 
}

<div class="container"> 
 
<div id="left"> 
 
    <div id="n1"></div> 
 
    <div id="n2"></div> 
 
</div> 
 
<div id="right"> 
 
    <div id="n3"></div> 
 
</div> 
 
</div>

Sie können auch das Gleiche tun innerhalb der left, da dies als Container für # 1 und # 2

.container { 
 
    display:flex; 
 
} 
 
div#left 
 
{ 
 
    width: 130px; 
 
    height: 80px; 
 
    background: red; 
 
    display:flex; 
 
} 
 

 
div#right 
 
{ 
 
    flex:1; 
 
    height: 80px; 
 
    background: blue; 
 
} 
 
#n1 { 
 
    width: 50px; 
 
    height: 80px; 
 
} 
 
#n2 { 
 
    flex:1; 
 
    height: 80px; 
 
    background:green; 
 
}

<div class="container"> 
 
<div id="left"> 
 
    <div id="n1"></div> 
 
    <div id="n2"></div> 
 
</div> 
 
<div id="right"> 
 
    <div id="n3"></div> 
 
</div> 
 
</div>

verhalten