如何证明图像是正确的

Question

/reservas.aspx?t=636530400000000000

我有问题。我想证明<div class="header"> <img src="logo.png" id="logo"> <div class="headerText"> <span>WYJĄTKOWA PIOSENKA NA URODZINY</span> </div> </div> 向右。

Answer 1

这里float:right的问题在于，如果前面的兄弟是一个块元素，或者元素本身没有空间可以放入，就像文本一样，它会创建一个新行。但是如果有必要，文本可以打破换行符。

这里使用了display:flex;。

使用flex，您可以在父元素上使用float:left创建其子项的列，类似于flex-direction:row。如果您需要一个向右浮动的元素，只需给它一个margin-left:auto;

＆＃13;

＆＃13;

.header {
  display: flex;
  flex-direction: row;
}

.headerText {
  margin-left: auto;
}

img {
  height: 50px;
  width: 50px;
  object-fit: cover;
}

＆＃13;

<div class="header">
  <img src="http://novaservis.info/wp-content/uploads/2017/12/small-cute-dog-breeds-that-stay-smallbest-25-types-of-small-dogs-ideas-on-pinterest-types-of-dogs-exciting.jpg" id="logo" />
  <div class="headerText">
    <span>WYJĄTKOWA PIOSENKA NA URODZINY</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

上面的标题是将图像对齐到右边，下面的描述是对齐跨度到右边假设对齐跨度到右图像到左边回答这个问题。在下面我创建了一个名为right的类，其css说 float：right; 并且左边的css说 float：left; ，基本上它对齐元素的位置。我这样做是为了让你理解css

＆＃13;

＆＃13;

.right
{
float:right;
}
.left
{
float:left;
}

＆＃13;

<div class="header">
    <img src="logo.png" class="left" id="logo">
        <div class="headerText">
            <span class="right">WYJĄTKOWA PIOSENKA NA URODZINY</span>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;