Question

我有一个像这样的div块：

<div class="first-color-block">
  <img src="test.png"/>
        Learn More
</div>

CSS：

.first-color-block :not(img){
  text-align: right;
}

但它不起作用。我究竟做错了什么？谢谢！

这就是我希望最终结果看起来像

------------------------|
                        |
 *img*             text |
                        |
------------------------|

Answer 1

你可以将img浮动到你想要的方向：

＆＃13;

.first-color-block {
    text-align: right;
}

.first-color-block img {
    float: left;
}

＆＃13;

<div class="first-color-block">
    <img src="http://via.placeholder.com/32x32" /> Learn More
</div>

＆＃13;

JSFiddle

Answer 2

只需添加其他解决方案即可使用flexbox。您可以justify every item to flex-end并让margin-right:auto on the img向左移动。

.first-color-block{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  border:2px dashed black;
  padding:10px;
}
.first-color-block img{
  margin-right:auto;
}

<div class="first-color-block">
  <img src="http://via.placeholder.com/150x150" /> Learn More and play more
  <p>This is another text </p>

</div>

如何为除divg之外的div中的所有元素设置text-align？

2 个答案: