英文:
CSS: I can't align a bar like an already aligned image. The bar tends to widen to the left instead of lining up to the right
问题
这是我正在构建的侧边栏中的一部分。我使用style="text-align: right;"将图像移到屏幕的最右侧。在同一个div中，图像上方还有一个红色的条，我希望它与图像完全对齐。但是我无法对齐红色的条。
图像的对齐和位置是正确的，现在我希望对齐红色的条和图像。
我需要的是：
（蓝色条和红色图像都必须对齐在屏幕的极右侧。如前所述，红色图像已经可以了，蓝色的还不行）
如何实现这个？
.bar {
background-color: blue;
font-size: 11px;
color: white;
padding-left: 2px;
width: auto;
}
<!doctype html>
<html lang="en">
<head>
<!-- Boostrap Files -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="col-md-4 col-lg-4 d-flex flex-column">
<div id="pub" style="text-align: right;">
<div style="text-align: center" class="bar">My Bar</div>
<img src="https://i.postimg.cc/d32tkpdw/ddddddddfdfdfdf.png" alt="aaa">
</div>
</div>
</body>
</html>
英文:
This is a piece that is in the sidebar I'm building. I move the image to the far right of the screen with style="text-align: right;". In the same div, above the image, there is also a red bar that I would like aligned exactly like the image. But I can't align the red bar as well.
The alignment and position of the image is right, alright, now I would like to align that red bar as well as the image.
I need this:
(both blue bar and red image, both must be aligned on the extreme right side of the screen. As said, the red image is already ok, the blue one is not)
How can i get this?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.bar {
background-color: blue;
font-size: 11px;
color: white;
padding-left: 2px;
width: auto;
}
<!-- language: lang-html -->
<!doctype html>
<html lang="en">
<head>
<!-- Boostrap Files -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="col-md-4 col-lg-4 d-flex flex-column">
<div id="pub" style="text-align: right;">
<div style="text-align: center" class="bar">My Bar</div>
<img src="https://i.postimg.cc/d32tkpdw/ddddddddfdfdfdf.png" alt="aaa">
</div>
</div>
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
如果你知道图片的宽度，你可以将蓝色的div的宽度设置为相同的值，并设置margin-left: auto，它会自动添加所需的边距：
.bar {
background-color: blue;
font-size: 11px;
color: white;
padding-left: 2px;
width: 300px;
margin-left: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Boostrap Files -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="col-md-4 col-lg-4 d-flex flex-column">
<div id="pub" style="text-align: right; width: 100%;">
<div style="text-align: center" class="bar">My Bar</div>
<img src="https://i.postimg.cc/d32tkpdw/ddddddddfdfdfdf.png" alt="aaa">
</div>
</div>
</body>
</html>
注意：我只翻译了代码部分，不包括注释和代码块的标题。
英文:
If you know the width of the image, you can set the blue div's width as the same value and set the margin-left: auto which automatically adds margin as needed:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.bar {
background-color: blue;
font-size: 11px;
color: white;
padding-left: 2px;
width: 300px;
margin-left: auto;
}
<!-- language: lang-html -->
<!doctype html>
<html lang="en">
<head>
<!-- Boostrap Files -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="col-md-4 col-lg-4 d-flex flex-column">
<div id="pub" style="text-align: right; width: 100%;">
<div style="text-align: center" class="bar">My Bar</div>
<img src="https://i.postimg.cc/d32tkpdw/ddddddddfdfdfdf.png" alt="aaa">
</div>
</div>
</body>
</html>
<!-- end snippet -->
答案2
得分: 1
Sure, here's the translated part:
"由于您正在使用Bootstrap，并且已经将栏和图像放在一个flex容器中，只需使用适当的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">
CSS部分未提供翻译，因为它主要包含样式属性名称，没有需要翻译的内容。
英文:
Since you're using Bootstrap and already have the bar and image in a flex container, just use the appropriate Bootstrap class. Replace flex-column with 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">
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.bar {
background-color: blue;
font-size: 11px;
color: white;
padding-left: 2px;
width: auto;
text-align: center;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论