Question

我在这里有这个HTML：

    <div class="last_img">
        <p>Galutinė žetono išvaizda:</p>
        <span class="zetin11">A</span>
        <span class="zetin12">A</span>
        <span class="zetin13">A</span>
        <span class="zetin14">A</span>
        <span class="zetin15">A</span>
        <img class="last_img_img" src="images/img1.png" alt="">
    </div>

当我写文本时，span中的文本向左移动，因此它会移到图像之外。如何才能在右侧添加字母，而不向左移动文本？

这是我的zetin11：

的CSS

position: relative;
    top: -125px;
    right: -79px;
    font-family: Courier;
    font-size: 18px;

Answer 1

从问题中我理解的是你想要在不移动段落的情况下将A拉到右边。如果那是案例，那么这里是

我刚刚使用了

span{
   float: right;
}

工作小提琴：https://jsfiddle.net/rittamdebnath/fdhj1u6s/

Answer 2

我会这样做：

HTML

<div class="last_img">
  <p>Galutinė žetono išvaizda:</p> <br />

  <div class="imagecontainer">
    <img class="last_img_img" src="https://i.imgur.com/I86rTVl.jpg" alt="" />
  </div>

   <!-- Seperate them into different classes to style them later on -->

  <div class="spancontainer">
    <span>A</span>
    <span>A</span>
    <span>A</span>
    <span>A</span>
    <span>A</span>
  </div>

</div>

CSS

.last_img{
    width: 100%;
}

.imagecontainer{
  float: left;
}

.spancontainer{
  float: right;
}

Click Here for JS Fiddle Example

回顾：我将两个项目分成不同的div，以便我可以使用CSS控制div。

我为第一个div命名的图像容器包含了一个类，该容器设置为向左浮动，以便图像粘在左边

和另一个div spancontainer设置为向右浮动，以便它将粘附在图像附近的右侧。

我喜欢设置一个全局div类，这样我就可以封装其中的所有其他类，并且可以控制全局类在页面本身也是一个特定的宽度......在这种情况下我将它设置为100％而我使用了你用'last_img'的名字我也删除了zetin类，因为你不需要它们，只要你不打算单独设置每个范围;）

希望这会有所帮助;）

在不向左推文本的情况下向右侧添加字母

2 个答案: