最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】css布局实现一行左边是图片右边是左右的文字

CSS crifan 4750浏览 0评论

想要在react js中实现这样的效果:

然后写了html的部分:

<code>      &lt;div class={style.the_herd_all}&gt;
        &lt;ul class={style.curent_farm}&gt;
          &lt;li&gt;
            &lt;img src={imgCurrentFarm} /&gt;
            &lt;p&gt;当前牛场名称:&lt;/p&gt;
            &lt;p&gt;{getCurCowFarmStr()}&lt;/p&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
</code>

但是不会写css布局。

然后去研究,如何实现。

css left right p

html – How to put img inline with text – Stack Overflow

Left Align and Right Align Text on the Same Line | CSS-Tricks

left – CSS:层叠样式表 | MDN

HTML/CSS: how to put text both right and left aligned in a paragraph – Stack Overflow

换成:

<code>&lt;p&gt;
&lt;img src={imgCurrentFarm} /&gt;
&lt;span&gt;当前牛场名称:&lt;/span&gt;
&lt;span&gt;{getCurCowFarmStr()}&lt;/span&gt;
&lt;/p&gt;
</code>

已经基本上是要的效果了:

【总结】

最后用:

<code>          &lt;div class={style.current_farm}&gt;
            &lt;p&gt;当前牛场:&lt;/p&gt;
            &lt;p&gt;
              &lt;img src={imgCurrentFarm} /&gt;
              &lt;span&gt;名称:&lt;/span&gt;
              &lt;span&gt;{getCurCowFarmStr()}&lt;/span&gt;
            &lt;/p&gt;
            &lt;p&gt;
              &lt;img src={imgFarmLocation} /&gt;
              &lt;span&gt;地址:&lt;/span&gt;
              &lt;span&gt;{getCurCowFarmAddressStr()}&lt;/span&gt;
            &lt;/p&gt;
          &lt;/div&gt;
</code>

以及css:

<code>.current_farm {
  padding: 10px 5px;
  font-size: 0.28rem;
  vertical-align: middle;
  line-height: 0.60rem;

  border-bottom: 1px solid #cccac9;
}

.current_farm img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.current_farm span {
  max-width: 100%;
}
</code>

即可:

转载请注明:在路上 » 【已解决】css布局实现一行左边是图片右边是左右的文字

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
89 queries in 0.187 seconds, using 22.16MB memory