我是 HTML/CSS 编程的新手(更熟悉 Python/C++)，我在尝试完成一个相对简单的任务时遇到了一些困难:
我基本上想要一个可以封装很多东西的盒子。我需要一张小图片和两段文字，第一段与图片左对齐，第二段与框右对齐。这些都应该在框中的行内水平填充。
然后我想要在第一行下方有一个更大的图像，该图像仍在框中，但已扩展以适合框的宽度。然后，我想要在其下方添加几行文字作为标题。
因为我需要很多这样的“盒子”，所以我在 Python 中的直觉是创建一个我可以反复重用的类对象。然而，我很难将这个概念转化为 HTML/CSS。
到目前为止，我有如下内容:
.boxed {
border: 1px solid black ;
padding: 25px
}
.right {
position: absolute;
right: 10px;
padding: 5px 0;
padding-right: 25px;
}
.left {
position: absolute;
left: 10px;
padding: 5px 0;
padding-left: 55px;
}
.img {
position: absolute;
right: 10px;
padding: 5px 0;
padding-top: 55px;
width: 100%;
}<body>
<div class="boxed">
<span class="right">mm/dd/yy</span>
<img src="/files/img_icon.jpg" alt="some_icon" width="25" height="25" style="vertical-align: middle;">
<span class="left"><b>some name</b></span>
<span class ="img"><img src="/files/sample_img.jpg" alt="bigger_img (should be inside box)" max-width: 100%></span>
</div>
</body>但它没有按照我的预期运行。有任何想法吗？ 谢谢!
最佳答案
试试这个:
HTML
<body>
<div class="boxed">
<div class="left">
<img src="https://picsum.photos/25" alt="some_icon" width="25" height="25" style="vertical-align: middle;">
<span><b>some name</b></span>
</div>
<div class="right">
<span>mm/dd/yy</span>
</div>
<div class ="img">
<img src="https://picsum.photos/500" alt="bigger_img (should be inside box)" max-width: 100%></span>
<div style="clear: both;"></div>
</div>
</body>
CSS
.boxed {
border: 1px solid black ;
padding: 25px
}
.right {
float: right;
right: 10px;
padding: 5px 0;
padding-right: 25px;
}
.left {
float: left;
padding: 5px 0;
padding-left: 10px;
}
.img {
text-align: center;
clear: both;
padding: 5px 0;
padding-top: 55px;
width: 100%;
}
您也可以使用 flex-box，但并非所有浏览器都支持它，并且在刚开始时可能会更加困惑。我将日期放在一个框内它自己的跨度内，这样如果您想将其他内容添加到右侧，您可以将它们放在“正确的”分类框内。
关于HTML:将内容封装在一个框中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52249027/