HTML:将内容封装在框中
HTML:将内容封装在框中
提问于 2018-09-10 06:13:45
我刚接触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>
但它并没有按照我的预期运行。有什么想法吗？谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-10 07:13:13
试试这个：
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，但是并不是所有的浏览器都支持flex-box，而且在第一次启动的时候会有点混乱。我把日期放在它自己的跨度内，放在一个盒子里，这样如果你想把其他东西添加到右边，你只需要把它们放在“正确”的分类盒子里。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52249027
复制相关文章
相似问题