如何在html中制作一盒内容？

Question

我正在努力学习 html 并且我需要能够将事物划分到它们应该出现的位置所以就像每件事都会有一张图片和一些文字

我需要做一个蓝色的盒子，在里面我需要一个图片和文字在它旁边，同样的东西。基本上如果我有办法在真实的内部创建一个新的？我猜。我不确定。这是我尝试过的，它几乎是我想要的，但我需要盒子是实心的，也许如果有人可以帮助我使图像和文本在水平轴上居中，这也会有所帮助。

<html>
    <head>
        <title>
            MaGa V1
        </title>
        <style type="text/css">
            .img_div {float: left; border: 1px solid white;}
        </style>
    </head>
    <body  bgcolor="#000000">
        <div class="img_div" style="margin-right: 32px">
            <img src="./../images/Shadows over Innistrad/Shadows over Innistrad.png"/>
            <figcaption>
                <a href="./Shadows over Innistrad.html" target="_self">Shadows over Innistrad</a>
            </figcaption>
        </div>
        <div class="img_div" style="margin-right: 32px">
            <img src="./../images/Battle for Zendikar/Battle for Zendikar.png"/>
            <figcaption>
                <a href="./Battle for Zendikar.html" target="_self">Battle for Zendikar</a>
            </figcaption>
        </div>
    </body>
</html>

Answer 1

像这样的事情应该让你开始：

body {background-color:black;}
.row{overflow:hidden;} /* Fixes float */
.img_div {float:left;width:45%;text-align:center;padding:10px;background:blue;}
.img_div:not(:nth-child(2)){margin-right:10px;}
.img_div a{color:gold;}

<div class="row">
  <div class="img_div">
    <img src="http://placekitten.com/100/102" />
    <figcaption>
      <a href="./Shadows over Innistrad.html" target="_self">Shadows over Innistrad</a>
    </figcaption>
  </div>
  <div class="img_div">
    <img src="http://placekitten.com/102/102" />
    <figcaption>
      <a href="./Battle for Zendikar.html" target="_self">Battle for Zendikar</a>
    </figcaption>
  </div>
</div>
<!-- .row -->

整个页面可能如下所示：

<html>
<head>
    <!-- Usually there is some stuff in here -- up to you -->
</head>
<body>
    <style>
        body {background-color:black;}
        .row{overflow:hidden;} /* Fixes float */
        .img_div {float:left;width:45%;text-align:center;padding:10px;background:blue;}
        .img_div:not(:nth-child(2)){margin-right:10px;}
        .img_div a{color:gold;}
    </style>

    <div class="row">
      <div class="img_div">
        <img src="http://placekitten.com/100/102" />
        <figcaption>
          <a href="./Shadows over Innistrad.html" target="_self">Shadows over Innistrad</a>
        </figcaption>
      </div>
      <div class="img_div">
        <img src="http://placekitten.com/102/102" />
        <figcaption>
          <a href="./Battle for Zendikar.html" target="_self">Battle for Zendikar</a>
        </figcaption>
      </div>
    </div>
</body>
</html>

我建议你 this tutorial, and then this one 只需运行快速通过它们

如果父容器（上例中的 .row）具有固定高度，则只能使用百分比作为高度。父容器的高度可以是 px、%、vh、em——但不能是 auto。

解决这个问题的几个想法是：
(1) 使用 padding 根据需要增加高度，或
(2) 使用 height:30vh

vh 与 % 非常相似，但它是按屏幕单位测量的（例如屏幕高度的 30/100 而不是 30 percent of parent height）- 并且不需要父级元素具有设定的高度。（请注意，宽度设置还有 vw。 这些也是 responsive 设置的有用单位，因为使用 vw/vh 您可以使尺寸在不同尺寸的屏幕上完全成比例。

jsFiddle Example

如何在html中制作一盒内容？

How can I make a box of content in html?

html

positioning