[英]Make DIV's expand outwards from center div instead of inwards
我连续三个 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(进度条)向外扩展而不是推入。
尝试使用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中的行号)
$positiveWidth = 0;
$negativeWidth = 0;
<div class='positive-bar hover-cursor' style='width: ".$positiveWidth."%;'></div>
<div class='negative-bar hover-cursor' style='width: ".$negativeWidth."%;'></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.