Question

如何将图像放在文本旁边？

＆＃13;

.column section {
  width: 50%;
  background-color: #16BAC5;
  padding: 1px 0px 1px 0px;
  text-align: center;
  font-family: "Alfa Slab One";
}

.column aside img {
  align: right;
  width: 100%;
}

＆＃13;

<body>
    <div class="column">
        <section>
            <h3>Lorem Ipsum Text</h3>
        </section>
        <aside>
            <img src="http://icons.iconarchive.com/icons/dapino/people/512/black-man-icon.png" alt="man" id="man" style="width:200px; height= 200px;">
        </aside>
    </div>
</body>

＆＃13;

Answer 1

你可以使用CSS«float»proprity：

 float: left;

或

 float: right;

Answer 2

实现此目标的一种经典方法是在您的文字中添加float: left并在图片中添加float: right：https://codepen.io/anon/pen/vdBaxp

＆＃13;

.column section {
  width: 50%;
  background-color: #16BAC5;
  padding: 1px 0px 1px 0px;
  text-align: center;
  font-family: "Alfa Slab One";
  float: left;
}

.column aside img {
  float: right;
  width: 100%;
}

＆＃13;

<div class="column">
    <section>
    <h3>Lorem Ipsum Text</h3>
    </section>
    <aside>
    <img src="http://icons.iconarchive.com/icons/dapino/people/512/black-
    man-icon.png" alt="man" id="man" style="width:200px; height= 200px;">
    </aside>
    </div>

＆＃13;

对于其他可能的解决方案，请查看this SO thread。

Answer 3

直接涂抹，不要在里面成像。撇开更窄，以便在此之前有文本的空间并将其向右浮动：

// Here is my CSS code:

.column section {
  width: 50%;
  background-color: #16BAC5;
  padding: 1px 0px 1px 0px;
  text-align: center;
  font-family: "Alfa Slab One";
}

.column aside {
  float: right;
  width: 50%;
}

<body>

    <div class="column">
      <section>
        <h3>Lorem Ipsum Text</h3>
      </section>
      <aside>
        <img src="http://icons.iconarchive.com/icons/dapino/people/512/black-man-icon.png" alt="man" id="man" style="width:200px; height= 200px;">
      </aside>
    </div>

</body>

Answer 4

默认情况下，

<aside>未应用任何特定的展示位置/布局设置 - 您可以为其定义CSS设置（例如，如果您想将其设置为侧边栏）。

<aside>是一个HTML5元素（未链接到任何CSS属性），并且在语义上被视为具有附加信息的单独部分。

也就是说，如果您只是想在文字的右侧放置图片，请不要使用aside，而是将float: right应用于图片并将其直接放入图片中文字流。它将在右侧，文本将浮动在它周围。

＆＃13;

.x {
width: 400px;
background: #eee;
}
.x img {
float: right;
}

＆＃13;

<div class="x">
<h3>Some header</h3>
<img src="http://placehold.it/120x120/fa0">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. ras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </p>

<p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat.</p>
</div>

＆＃13;

我无法将此图片放在HTML＆amp;中的文本旁边CSS，我该如何解决这个问题？

4 个答案: