CSS Styling Füllraum Links in der linken Seite des Elements und der rechten Seite des Elements

Question

Stellen Sie sich ein Element, das in seinem Container zentriert ist, hat seine Breite, aber nicht die genaue Breite, etwas wie Text und ich will der linke Platz und der rechte Platz sind gleich und farbig, etwa so:

----------------- Test This ----------- ------

#left { 
 
    background-color: red; 
 
} 
 
#middle { 
 
    width: 200px; 
 
    /* it might be different */ 
 
} 
 
#right { 
 
    background-color: red; 
 
}

<div id="left"></div> 
 
<div id="middle"></div> 
 
<div id="right"></div>

Answer 1

.container{ 
     display:flex; 
    } 
    .main-body{ 
     flex:1 1 auto; 
    } 
    #left{ 
     background-color: red; 
    } 
    #middle{ 
     width: 200px; 
     text-align:center; 
    } 
    #right{ 
     background-color: red; 
    } 
    <div class="container"> 
    <div class="main-body" id="left"></div> 
    <div id="middle">Hello</div> 
    <div class="main-body" id="right"></div> 
    </div> 

Answer 2

können Sie Rand Attribut sowohl links hinzufügen und Recht div von yours.Fix die Breite des linken und rechten div.Try diesem, ich denke, es Ihr Problem aussortieren wird

Answer 3

erreicht werden kann display: flex

.wrapper { 
 
    display: flex; 
 
    text-align: center; 
 
} 
 
#left { 
 
    flex: 1; 
 
    background-color: red; 
 
} 
 
#middle { 
 
    /* it might be different */ 
 
} 
 
#right { 
 
    flex: 1; 
 
    background-color: red; 
 
}

<div class="wrapper"> 
 
    <div id="left"></div> 
 
    <div id="middle">Some text</div> 
 
    <div id="right"></div> 
 
</div> 
 
<br/> 
 
<div class="wrapper"> 
 
    <div id="left"></div> 
 
    <div id="middle">Some long text can go here!</div> 
 
    <div id="right"></div> 
 
</div>

Answer 4

Split in gleich mit Räume Bootstrap und anschließend Farbe

<div class="container"> 
<div class="col-md-12 col-sm-12 col-xs-12"> 
    <div class="row"> 
     <div class="col-md-4 col-sm-4 col-xs-4 fill-color"> h</div> 
     <div class="col-md-4 col-sm-4 col-xs-4">h</div> 
     <div class="col-md-4 col-sm-4 col-xs-4 fill-color">h</div> 
    </div> 
</div> 

füllen

.fill-color { 
    background: red; 
} 

fiddle

Answer 5

Surround Ihr div von einem anderen div "Container" Arbeiten, jetzt brauchen Sie nicht nach links und rechts divs .. Ihr Text hier ist Div von div-Container umgeben #container { Hintergrundfarbe: rot; }

#middle { 
     font-size: 30px; 
     width: 80%; 
     margin: auto; 
     text-align: center; 
     background-color: white; 
    } 


</style>