使 DIV 从中心 div 向外扩展而不是向内扩展

Question

I have three divs in a row

One on the left, one in the middle and one on the right.

The one's on the left and right need to expand AWAY from the one in the middle.

Please see image:

my clients.php which displays them all

echo "<div style='width: 100%; display: inline-block;'>";

while ($client = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC))
{
    $positive = $client['Pos'];
    $negative = $client['Neg'];
    $total = ($positive + $negative);

    // Calculate width in percentage
    if ($total > 0) 
    {
        $positiveWidth = ($positive/$total)*100;
        $negativeWidth = ($negative/$total)*100; 
    }
    else
    {
        $positiveWidth = "0%";
        $negativeWidth = "0%";
    }


    echo "<div class='clientid' style='height: 50px; font-size: 18px; vertical-align: middle; display: inline-block; width: 100%'>" . 

            "
            <div class='positive-bar' style='width: $positiveWidth;%;'></div>

            <div style='display: inline-block; width: 5%;'>      
                <span style='font-size: 20px;' class='hover-cursor fa fa-chevron-up vote-up'></span>
            </div>" .

                 "<div id='client-name' class='hover-cursor hvr-underline-reveal voteup votedown' data-clientid='{$client['ClientID']}' style='width: 20%; display: inline-block;'>" . $client['Client'] . "</div>" . 

            "<div style='display: inline-block; width: 5%;'>
                <span style='font-size: 20px; text-align: right;' class='hover-cursor fa fa-chevron-down vote-down'></span>
            </div>

            <div class='negative-bar' style='width: $negativeWidth;%;'></div>

         </div> 
        <br />";
}

echo "</div>";

This means that also the divs only get as big as you see in the image and push the text out of the center.

The relevant piece of CSS:

.positive-bar
{
  height: 25px;
  background-color: #64BE06;
  display: inline-block;
  border-radius: 5px;
}

.negative-bar
{
  height: 25px;
  background-color: red;
  display: inline-block;
  border-radius: 5px;
}

So my question is How can i make the DIV's (Progress bars) Expand outwards instead of pushing in.

Answer 1

Try doing it using flexbox

 .container{ width:100%; display:flex; flex-direction:row; margin:5px 0; } .middleOne{ flex-grow:1; height:25px; text-align:center; border:1px solid red; } .rightOne,.leftOne{ height:25px; width:25%; min-width:100px; border:1px solid green; display:flex; } .leftOne{ justify-content:flex-end; } .rightOne{ justify-content:flex-start; } .progress{ background-color:green; margin:0; padding:0; height:25px; }

 <div class="container"> <div class="leftOne"> <div class="progress" style="width:70%;"></div> </div> <div class="middleOne">Content Here</div> <div class="rightOne"> <div class="progress" style="width:40%;"></div> </div> </div> <div class="container"> <div class="leftOne"> <div class="progress" style="width:50%;"></div> </div> <div class="middleOne">Content Here</div> <div class="rightOne"> <div class="progress" style="width:40%;"></div> </div> </div> <div class="container"> <div class="leftOne"> <div class="progress" style="width:30%;"></div> </div> <div class="middleOne">Content Here</div> <div class="rightOne"> <div class="progress" style="width:80%;"></div> </div> </div> <div class="container"> <div class="leftOne"> <div class="progress" style="width:100%;"></div> </div> <div class="middleOne">Content Here</div> <div class="rightOne"> <div class="progress" style="width:0%;"></div> </div> </div>

EDIT : specific for The code OP gave in comments

I suggest you to make these changes (line numbers are the line numbers from this pastebin you gave)

• Line 81 :: $positiveWidth = 0;
• Line 82 :: $negativeWidth = 0;
• Line 89 :: <div class='positive-bar hover-cursor' style='width: ".$positiveWidth."%;'></div>
• Line 103 :: <div class='negative-bar hover-cursor' style='width: ".$negativeWidth."%;'></div>