网站中最常见的内容展现形式就是图文啦！有动手实践过的小伙伴一定知道，图文是我们在编辑网站的过程中完全无法避免的，那么我们有办法优化这种内容的展现形式吗？

答案当然是有的，今天小竹子就给大家带来了这样一段代码效果。

在竹子编辑器的系统设置中，一个图文组件可以通过点击样式设置图文的布局，我们系统内置了8种最常见的图文布局方式可以设置，可以满足大多数场景下页面制作的需求。

但是如果想要给内容的展示方式加一点新意，那么我们就需要加一些代码效果啦！

比如我们可以把图文的结合方式设置成这样：

这个效果就是通过一串简单的代码实现的，首先我们需要将图文的布局改成这种形式

然后我们点击图文的设置，将下列代码复制进去，具体操作如下：

‍‍

代码如下：

<style>

    ._14tvbck7so000{

  }

._14tvbck7so000 .zz-comp-list__item .text, ._14tvbck7so000 .zz-comp-list__item:hover .caption-hover .text{

margin-left: 50%;

}

@media (max-width: 767px)

{

._14tvbck7so000 .zz-comp-list__item .text, ._14tvbck7so000 .zz-comp-list__item:hover .caption-hover .text{

margin-left: 51.5%;

}

}

</style>

PS：注意代码中蓝色背景部分的代码需要根据实际的组件id进行替换哦，组件id可以在这里获取：

好啦，今天的教程就到这里了，大家赶快去试试吧，我们下期再见吧！