使 DIV 從中心 div 向外擴展而不是向內擴展

Question

我連續三個 div

一個在左邊，一個在中間，一個在右邊。

左側和右側的需要從中間的AWAY展開。

請看圖片：

我的clients.php 顯示它們全部

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>";

這意味着 div 也只會變得和您在圖像中看到的一樣大，並將文本從中心推出。

相關的 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;
}

所以我的問題是如何使 DIV（進度條）向外擴展而不是推入。

Answer 1

嘗試使用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>

編輯：特定於 OP 在注釋中給出的代碼

我建議您進行這些更改（行號是您提供的這個pastebin中的行號）

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