Html 不规则插入的两列文本布局_Html_Css

Html 不规则插入的两列文本布局

html css

Html 不规则插入的两列文本布局,html,css,Html,Css,一张图片胜过千言万语：如何实现这种布局？我希望文本能够从第1列自由地流到第2列请注意，inset width大于列宽，因此它会稍微“推”第1列中的文本。下图插图第1列返回正常宽度我希望与最新版本的现代浏览器（Chrome、FF）兼容。没关系。狩猎、移动狩猎、歌剧都是可取的 JS还可以，但我更喜欢没有它的解决方案关于已知尺寸的更新：我知道整个“页面”的宽度和高度我知道图像的宽度和高度我知道插图的宽度，但不知道它的高度（因为有额外的标题文本）更新：下面是我的测试代码。如果

一张图片胜过千言万语：

如何实现这种布局？我希望文本能够从第1列自由地流到第2列

请注意，inset width大于列宽，因此它会稍微“推”第1列中的文本。下图插图第1列返回正常宽度

我希望与最新版本的现代浏览器（Chrome、FF）兼容。没关系。狩猎、移动狩猎、歌剧都是可取的

JS还可以，但我更喜欢没有它的解决方案

关于已知尺寸的更新：

我知道整个“页面”的宽度和高度
我知道图像的宽度和高度
我知道插图的宽度，但不知道它的高度（因为有额外的标题文本）

更新：

下面是我的测试代码。如果将inset移出columns div，它将显示为“第三列”

如果inset位于文本前面，则它将显示在顶部的左栏中，从左侧剪裁到列宽

如果inset位于文本的末尾，则它将显示在底部的右列中，从左侧剪切到Chrome中的列宽，并溢出到FF中的左列（不推动其文本）

我一定错过了什么…：-(


柱试验
分栏
{
文本对齐：左对齐；
-webkit列数：2；
-webkit柱间隙：40px；
-moz列数：2；
-moz柱间距：40px；
列数：2；
柱间距：40px；
}
第p部分
{
边际上限：0px；
边缘底部：20px；
文本缩进：20px；
}
奥雷姆·伊普苏姆·多洛·西特，一位杰出的献祭者。努克·奈克·艾利特，莫利斯是一位秃鹫，莫利斯·维塔·奥古斯。塞德·奥古斯·埃尼姆，康格·拉奥里特·亨德雷特，尤里西斯·艾尔提斯。整尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊尊。

奥雷姆·伊普苏姆·多洛·塞特·塞特·艾米特，一位杰出的献祭者。努克·奈克·艾克·艾克、莫利斯·维塔·奥古斯。塞德·奥古斯·埃尼姆、康格·拉奥里特·亨德雷特、尤里西斯·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·莱斯特、尤里西斯·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆特·sem调味品：胎动弧线。怀孕后的胎动。Sed bibendum ullamcorper lectus，id mollis nulla pulvinar hendrerit。Mauris id est nullas。faucibus orci luctus和ultrices Posuer cubilia Curae中的前庭和同侧前庭；Etiam Temporal Vennenatis Vehitula。Nam a enim justo，nec viverra sem。Vivamus faucibus ullamcorpe罗博蒂斯酒店。


在拉齐尼亚的精英阶层中，非累积性的非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性非累积性奥纳雷。一个善于社交的人，一个善于交际的人，一个善于交际的人，一个善于交际的人，一个善于交际的人，一个善于交际的人，一个善于交际的人，一个善于交际的人，一个善于交际的人，一个善于交际的人，一个善于交际的人，一个善于交际的人，一个善于交际的人，一个善于交际的人，一个善于交际的人，一个善于交际的人，一个善于交际的人圣尤里西斯。莫里斯·塞德·拉奥里特东部。


在《居住平台》中，一位名叫莫利斯·达皮布斯·泰卢斯的整数，在维尼那提斯·米·尤伊斯莫·奎斯·多内克·奎斯·乌兰科珀·努拉、梅塞纳斯·塞姆珀·波特提托·尼布、波特提托·波特提托·波特提托·波特提托·尼布、波特提托·波特提托·波特提托·波特提托·埃吉特。每一个诺斯特拉的科努比亚、每一个希梅纳厄斯的接受者，都有一个社会阶层，都有一个灵活的扭转力权杖之星。


请不要忘记，我是欧盟的侵权者、侵权者和智者。不要忘记，我是欧盟的智者，我是欧盟的智者。不要忘记，我是一种调味品，一种调味品，一种调味品，另一种调味品，一种调味品，一种调味品，一种调味品洛博蒂斯大学的研究生院、法雷特拉大学的研究生院、国际研究生院的研究生院、居住平台的研究生院。


猫舌苔、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫掌甲、猫甲、猫掌甲、猫掌甲不可撤销。暂时不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的暂不可撤销的.阿利奎姆在一个失足的地方。多内克·奎斯在《自由之路》中把猫咪的尸体丢在了地下室里。多内克·奎斯在康格·艾利特·莫莱斯蒂（congue elit molestie）的猫咪和梅特斯·莫利斯（metus mollis）身上。


但是，洛博蒂斯，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上，坐在车上因此，我们必须在必要的情况下，在必要的情况下，在必要的情况下，在必要的情况下，在必要的情况下，在必要的情况下，在必要的情况下，在必要的情况下，在必要的情况下，在必要的情况下，在必要的情况下，在必要的情况下，在必要的情况下，在必要的情况下，在必要的情况下，在必要的情况下，在必要的情况下，在必要的情况下，在。


这是一个有缺陷的解决方案。这是一个有缺陷的解决方案。这是一个有缺陷的解决方案。这是一个有缺陷的解决方案。这是一个有缺陷的解决方案。这是一个有缺陷的解决方案。

在单独的CSS层和“pinnin”中制作带有标题的图像怎么样

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">

<title>Column test</title>

<style type="text/css">

div.columns
{
  text-align: left;
  -webkit-column-count: 2;
  -webkit-column-gap: 40px;
  -moz-column-count: 2;
  -moz-column-gap: 40px;
  column-count: 2;
  column-gap: 40px;
}

div.columns p
{
  margin-top: 0px;
  margin-bottom: 20px;
  text-indent: 20px;
}

</style>

</head>

<body>

<div class="columns" style="width:800px">

<!-- BEGIN INSET -->
<div style="float:right; width: 500px; margin-left: 40px; margin-bottom: 40px;">
  <div style="width: 500px; height: 300px; background-color: #5a5a5a;">
  &nbsp;
  </div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc neque elit, mollis a vulputate ac, mollis vitae augue. Sed augue enim, congue ac laoreet hendrerit, ultricies a sem. Integer dignissim molestie erat quis lacinia.
</div>
<!-- END INSET -->

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc neque elit, mollis a vulputate ac, mollis vitae augue. Sed augue enim, congue ac laoreet hendrerit, ultricies a sem. Integer dignissim molestie erat quis lacinia. Nulla pellentesque sodales dolor, et egestas tortor ultricies et. In hac habitasse platea dictumst. Nunc semper dui sit amet sem condimentum vitae molestie arcu cursus. Morbi rhoncus posuere gravida. Sed bibendum ullamcorper lectus, id mollis nulla pulvinar hendrerit. Mauris id est nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam tempor venenatis vehicula. Nam a enim justo, nec viverra sem. Vivamus faucibus ullamcorper lobortis.
</p>

<p>
Cras nulla ante, tincidunt non accumsan nec, adipiscing eget odio. Nam gravida ligula at elit interdum lacinia. Mauris condimentum justo venenatis mauris condimentum eu fringilla augue hendrerit. Duis eget enim et erat faucibus blandit et lobortis ligula. Integer felis justo, feugiat et scelerisque non, vehicula in urna. Aliquam dignissim tristique ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam volutpat ullamcorper purus, ut auctor magna consectetur at. Aliquam vitae odio in lectus lobortis fermentum. Nunc tortor quam, luctus et consequat vel, fringilla at lorem. Cras ut molestie diam. In aliquet purus sed massa sagittis id dapibus est ultricies. Mauris sed laoreet est.
</p>

<p>
In hac habitasse platea dictumst. Integer mollis dapibus tellus, at venenatis mi euismod quis. Donec quis ullamcorper nulla. Maecenas semper porttitor nibh, et porttitor ipsum convallis eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec est turpis, faucibus id venenatis ac, mollis ut risus. Nam tincidunt scelerisque lectus.
</p>

<p>
Donec euismod neque id est accumsan eu egestas tortor adipiscing. Curabitur tortor ante, mattis at ultrices vel, facilisis eu sapien. Nullam congue ipsum vel nisi condimentum quis condimentum turpis pretium. In aliquet imperdiet ligula, ut dictum lorem ultrices at. Quisque ac nunc arcu. Pellentesque egestas venenatis urna, in blandit purus ullamcorper at. Ut lobortis, nisi at pharetra consequat, est nibh interdum est, vitae tempor felis magna sed erat. In hac habitasse platea dictumst.
</p>

<p>
Sed ligula felis, volutpat ac pulvinar a, porta sed felis. Aenean eu turpis nec magna mollis tincidunt quis vitae massa. Praesent faucibus nisl in leo rutrum gravida. Donec aliquet interdum vestibulum. Aenean faucibus posuere ornare. Donec sed velit id sem pulvinar faucibus ut tempor tellus. Donec ante justo, egestas eget venenatis vitae, tempor et nulla. Suspendisse dapibus pellentesque nulla sit amet tempor. Curabitur auctor, sem id ullamcorper ultricies, nisl tortor rhoncus lorem, eleifend ornare tortor ante vel lectus. Nunc lectus sem, ullamcorper vitae aliquam sed, volutpat eu justo. Nam et nisl est, dictum vestibulum dolor. Cras ipsum orci, vestibulum ac convallis a, laoreet in lorem. Aliquam at adipiscing lacus. Donec quis dui sed felis sollicitudin ultricies in vel libero. Donec tincidunt felis et metus mollis at congue elit molestie.
</p>

<p>
Ut posuere lobortis est, sit amet adipiscing neque vehicula eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id fermentum felis. Aenean nunc neque, faucibus vel consectetur eget, ullamcorper ac est. Nulla sit amet metus sed erat fringilla lacinia. In at pulvinar sapien. Mauris volutpat scelerisque elit, quis lobortis orci imperdiet pretium. Ut facilisis interdum dapibus. Sed luctus dignissim blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin ultricies tortor nec rutrum.
</p>

<p>
Quisque sed sollicitudin lacus. Quisque egestas interdum dui, eget gravida sem convallis in. Sed auctor justo et urna gravida tincidunt. Proin erat nibh, euismod et varius at, aliquam in diam. Nullam condimentum libero id libero pretium ac ullamcorper arcu luctus. Sed gravida mattis tortor sit amet accumsan. Etiam vitae consequat dolor.
</p>

</div>

</body>

</html>

#column1 {
    color: white;
    width: 200px;
    background: #444;
    height: 300px;
    float: left;
    margin-right: 5px;
}
#column1-spacer {
    float: right;
    width: 45px;
    height: 170px;
}
#column2 {
    color: white;
    width: 200px;
    height: 300px;
    background: #444;
    float: left;
    margin-left: 5px;
}
#column2-spacer {
    height: 175px;
}
#imageWrapper {
    background: white;
    position: absolute;
    left: 170px;
    width: 250px;
    height: 170px;
}
#image {
    margin-left: 10px;
    width: 240px;
    height: 125px;
    background: #888;
}
#caption {
    font-size: 0.85em;
    margin-left: 10px;
}

<div id="column1">
    <div id="column1-spacer"></div>
    Column 1
</div>
<div id="column2">
    <div id="column2-spacer"></div>
    Column 2
</div>
<div id="imageWrapper">
    <div id="image">Image</div>
    <div id="caption">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Maecenas vel vulputate justo.
    </div>
</div>