浮动或位置：绝对;我不懂

Question

当涉及CSS和HTML时，我是一个完整的菜鸟， 我试图让两张图片一张向左浮动，另一张向右浮动 所以我可以在它们下面放一些文字。

我遇到的问题是浮动命令和位置命令都填满了页面结构，我不知道为什么

我试过一个浮动和一个位置：绝对;但他们仍然填写页面。 因为除了图像和H1和H2之外，HTML页面上没有任何内容 页眉和页脚都在页面顶部。

任何帮助将不胜感激

感谢 约翰

p.s我还在学习

what I've got

what i want

Answer 1

位置： 属性 - 在非常困难的情况下使用此功能，也可用于定位misc。像图标/旗帜和其他元素一样的元素应该始终固定在一个位置。

float： 属性 - 当我需要内联元素时使用，我知道它们应该粘贴在页面的一侧或父容器中。

显示：内联块 - 这用于将内联元素作为内联块显示，例如<script type="text/javascript" src="jquery.min.js"></script> 是一个内联块。 但这有副作用＆＃34;在内联块之间总是会有空格。

如果你想将浮动元素居中：

<p></p>

此外，浮动元素不会作为块。它们被迫浮动到您声明的一侧，直到父容器壁或其他浮动元件。 如果你想为浮动元素提供空间，请使用：

        <style>
          .container {
            text-align: center;
            width: 100%;
          }

          .centered-box {
            display: inline-block;
            max-width: 100%;
          }

          .elm {
            float: left;
            width: 300px; 
            max-width: 50%;
          }
        </style>


        <div class="container">
          <div class="centered-box">
            <div class="elm">
            </div>

            <div class="elm">
            </div>
          </div>
        </div>

Answer 2

这里有一个框架。

＆＃13;

＆＃13;

header,
footer {
  text-align: center;
}

.container {
  display: flex;
  justify-content: space-between;
}

.leftcolumn,
.rightcolumn {
  width: 40%;
}

＆＃13;

<header>header</header>
<div class="container">
  <div class="leftcolumn">
    <h1>header 1</h1>
    <img src="http://placehold.it/200">
    <p>Text</p>
  </div>
  <div class="rightcolumn">
    <h1>header 1</h1>
    <img src="http://placehold.it/200">
    <p>Text</p>
  </div>
</div>
<footer>footer</footer>

＆＃13;

＆＃13;

＆＃13;