jquery - 将图片插入 2 列文本

标签 jquery html css

<分区>

我正在用 HTML、CSS 和 jQuery 编写一个网站。我有一个具有 2 列样式的文本和一个像这样的文本前的图片:

   <div>
      <div style="float:right">
          <img src="imageSource"/>
      </div>    
      <div style="-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;">
          TEXT
      </div>
   </div>

我希望第一列出现在图片之前,第二列出现在图片下方,如下所示:

enter image description here

我该怎么做?

最佳答案

像这样:

<div class="col1">text</div>
<div class="col2">
    <img src="http://placehold.it/200x100">
    <div class="col2text">text</div>
</div>

还有 CSS:

.col1{
    float:left;
    width:200px;
    border:1px solid black;
    height:400px;
}
.col2{
    width:200px;
    border:1px solid red;
    height:400px;
    float:left;
}

http://jsfiddle.net/y8md61no/

关于jquery - 将图片插入 2 列文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25714631/

上一篇:html - CSS定位div正确分为两列

下一篇:css - 菜单列表 - 悬停时文本区域的背景颜色不会改变

相关文章:

javascript - 数据表排序不正确

javascript - 填充对话框后添加行

javascript - 通过多个名称查找元素 jQuery

html - 带有导航栏 Logo 的 Bootstrap

php - Wordpress 中的 Ajax 调用根本不起作用(500 内部服务器错误)

android - jquery mobile - Android 手机上的视口(viewport)值

javascript - 在 pug 文件上的 p.lead 的同一行中添加 jQuery id

javascript - 隐藏滚动条 iFrame 子网站

css - 如何使用 adf 更改字体系列

html - 垂直和水平居中对齐文本