两个相对侧的两个元素答案

【问题标题】：Two elements on two opposite sides两个相对侧的两个元素
【发布时间】：2017-10-14 14:41:40
【问题描述】：

如何在两个对立面创建具有 2 个元素（文本和 img）的 div？文本的长度是可变的（这是一个可供选择的月份列表）。所以文本应该在 div 或“p”的左侧，而 img 应该在右侧。他们之间是隔阂。喜欢这个页面： https://zapodaj.net/acb40b1461eaf.jpg.html

【问题讨论】：

请在minimal reproducible example在问题本身中包含所有相关代码，而不是仅在第三方网站上。
阅读 CSS 浮动

标签： javascript html css image elements

【解决方案1】：

有多种方法可以做到这一点，在容器中的每个对象上使用float 或margin。

【讨论】：

【解决方案2】：

CSS 属性 Float 可以帮助您！

.parent {
  width: 90%;
  height: 100px;
  background: #EFEFEF;
 }
 
 .left-child {
 width: 80px;
 height: 80px;
 margin: 10px;
 background: #DDDDDD;
 
 float: left;
 }
 
 .right-child {
 width: 80px;
 height: 80px;
 margin: 10px;
 background: #DDDDDD;
 
 float: right;
 }

<div class="parent">
<div class="left-child"></div>
<div class="right-child"></div>
<div>

【讨论】：

【解决方案3】：

你可以通过使用float来实现它，如下所示：

<!DOCTYPE html>
<html>
<head>
    <style>
        .left {
        float:left;
        }
        .right {
        float:right;
        }
        img {
        margin:0.5em;
        }
    </style>
    <body>
        <div class="container">
            <p class="left">Text will come here</p>
            <img src="" width="" height="" class="right" />
        </div>
    </body>
</html>

请指定图像属性。谢谢！

【讨论】：

【解决方案4】：

有很多方法，包括边距、浮动甚至 position: absolute 在某些情况下，但值得注意的是有一组相当新的 css 属性 - flex:

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

<div class="container">
  <div>a</div>
  <div>b</div>
</div>

【讨论】：