Question

如何在两个oppoiste边创建带有2个元素的div（text和img）？文本长度是可变的（它是要选择的月份列表）。所以文本应该在div的左侧或者＆＃34; p＆＃34;和img应该在右边。他们之间是差距。喜欢这个页面： https://zapodaj.net/acb40b1461eaf.jpg.html

Answer 1

有多种方法可以在容器中的每个对象上使用float或margin。

Answer 2

CSS-Property Float可以帮到你！

＆＃13;

.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;
 }

＆＃13;

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

＆＃13;

Answer 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>

请指定图片属性。谢谢！

Answer 4

有很多方法，包括margin，float或even position：在某些情况下是绝对的，但值得注意的是有一组相当新的css属性 - flex：

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

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

两个相对的两个元素

4 个答案: