Responsive Design mit zwei festen Größe divs an den Seiten und ein div für den Rest in der Mitte

Question

Ich habe einen Header mit drei Elementen wie folgt aus:

#container { 
 
    width: 100%; 
 
} 
 
#container div { 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 
#container #left, 
 
#container #right { 
 
    width: 50px; 
 
}

<div id="container"> 
 
    <div id="left">L</div> 
 
    <div id="center">CENTER</div> 
 
    <div id="right">R</div> 
 
</div>

Was Ich mag würde, ist um es reaktionsfähig zu machen, so dass es die gesamte Breite des Fensters abdeckt, aber die Seitendivis (links und rechts) müssen die gleiche Größe beibehalten, so dass die einzige, die die Größe ändern muss, die mittlere ist. Wie kann ich dies in CSS erreichen?

Answer 1

Zum Beispiel

#container { 
 
    display: flex; 
 
} 
 
#container div { 
 
    display: inline-block; 
 
    text-align: center; 
 
    flex: 1 1; 
 
} 
 
#container #left, 
 
#container #right { 
 
    flex: 0 0 50px; 
 
    background-color: rgba(0,0,0,.1); 
 
}

<div id="container"> 
 
    <div id="left">L</div> 
 
    <div id="center">CENTER</div> 
 
    <div id="right">R</div> 
 
</div>

Answer 2

die divs floating Versuchen:

#container { 
 
    width: 100%; 
 
} 
 
#container div { 
 
    display: block; 
 
    text-align: center; 
 
    background: green; 
 
} 
 
#container #left, 
 
#container #right { 
 
    width: 50px; 
 
    background: red; 
 
} 
 

 
#container #left { 
 
    float: left; 
 
} 
 

 
#container #right { 
 
    float: right; 
 
}

<div id="container"> 
 
    <div id="left">L</div> 
 
    <div id="right">R</div> 
 
    <div id="center">CENTER</div> 
 
</div>

Answer 3

Set absolu Position von links und rechts Div.

#container #left, #container #right { 
    width: 50px; 
    background-color:red; 
    float:right; 
    position:absolute; 
} 
#container #center { 
    width: 100%; 
    margin:0px auto;   
    background-color:blue; 
    float:left; 
} 

Answer 4

HTML

<div id="container"> 
    <div id="left">L</div> 
    <div id="center">CENTER</div> 
    <div id="right">R</div> 
</div> 

CSS

* 
    { 
    margin:0; 
    padding:0; 
    } 
    #container { 
    width: 100%; 
    } 
    #container div { 
    display: inline-block; 
    text-align: center; 
    } 

    #container #left, 
    #container #right { 
    width: 50px; 
    border:1px solid red; 
    } 
    #center 
    { 

    border:1px solid blue; 
    width: calc(100% - 115px); 
    margin:auto; 
    } 

https://jsfiddle.net/ht3o5n81/

Answer 5

#container { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
#container #center{ 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
#container #left, 
 
#container #right { 
 
    width: 50px; 
 
}

<div id="container"> 
 
    <div id="left">L</div> 
 
    <div id="center">CENTER</div> 
 
    <div id="right">R</div> 
 
</div>

Ich hoffe, das hilft.