Question

我是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>

但是它没有按照我的预期运行。有任何想法吗？谢谢！

Answer 1

尝试一下：

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，并且刚开始时可能会有些混乱。我将日期放在框内自己的范围内，这样，如果您想在右侧添加其他内容，就可以将它们放在“正确”的分类框中。

HTML：将内容封装在一个框中

1 个答案: