Bootstrap CSS：我不能像对齐图像一样对齐一个条形图,横条倾向于向左变宽而不是向右排列

bvhaajcl 于 2023-08-01 发布在 Bootstrap

关注(0)|答案(2)|浏览(101)

这是我正在构建的侧边栏中的一块。我使用style="text-align: right;"将图像移动到屏幕的最右边。在同一个div中，在图像上方，还有一个红色的条，我想与图像完全对齐。但是我不能把红条也对齐。
图像的对齐和位置是正确的，好吧，现在我想对齐红色条以及图像。

的数据

我需要这个：

(both蓝色条和红色图像，两者都必须在屏幕的最右侧对齐。如前所述，红色的图像已经可以了，蓝色的就不行了）

的
我怎样才能得到这个？

.bar {
  background-color: blue;
  font-size: 11px;
  color: white;
  padding-left: 2px;
  width: auto;
}

个字符

twitter-bootstrap

来源：https://stackoverflow.com/questions/76709307/css-i-cant-align-a-bar-like-an-already-aligned-image-the-bar-tends-to-widen-t

2条答案

按热度按时间

yhived7q1#

如果你知道图像的宽度，你可以将蓝色div的宽度设置为相同的值，并设置margin-left: auto，它会根据需要自动添加边距：

.bar {
  background-color: blue;
  font-size: 11px;
  color: white;
  padding-left: 2px;
  width: 300px;
  margin-left: auto;
}

个字符

赞(0）回复(0）举报 2023-08-01

jvidinwx2#

由于您使用的是Bootstrap，并且已经在Flex容器中拥有了bar和image，因此只需使用适当的Bootstrap类即可。将flex-column替换为justify-content-end

<div class="col-md-4 col-lg-4 d-flex flex-column">
<div class="col-md-4 col-lg-4 d-flex justify-content-end">

字符串

.bar {
  background-color: blue;
  font-size: 11px;
  color: white;
  padding-left: 2px;
  width: auto;
  text-align: center;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<div class="col-md-4 col-lg-4 d-flex justify-content-end">

  <div id="pub">
    <div class="bar">My Bar</div>
    <img src="https://i.postimg.cc/d32tkpdw/ddddddddfdfdfdf.png" alt="aaa">
  </div>

</div>

赞(0）回复(0）举报 2023-08-01

我来回答

Bootstrap CSS：我不能像对齐图像一样对齐一个条形图,横条倾向于向左变宽而不是向右排列

2条答案

相关问题

热门标签

最新问答