Question

我连续三个div

一个在左边，一个在中间，一个在右边。

左边和右边的那个需要从中间的那个扩展 AWAY 。

请看图片：

my 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>

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

1 个答案: