带有不规则插入的双列文本布局

时间：2011-10-30 17:44:17

标签： html css

一张价值千言万语的图片：

layout

如何实现此布局？我希望文本从Column-1自由流动到Column-2。

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

我希望与最新版本的现代浏览器（Chrome，FF）兼容。没有IE可以。 Safari，Mobile Safari，Opera都是可取的。

JS没问题，但我更喜欢没有它的解决方案。

有关已知尺寸的更新：

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

更新

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

如果插入位于文本前面，它将显示在顶部的左列中，从左侧剪切到列宽。

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

我一定错过了什么......： - （

<!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>

2 个答案:

答案 0 :(得分：0)

如何在一个单独的CSS图层中制作带有标题的图像并将其“固定”到正确的位置，再加上下面的一些DIV，这些DIV负责将内容从其下面推出？像这样：

在CSS中：

#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;
}

在HTML中：

<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>

在我的Firefox中，它产生了这个：

enter image description here

答案 1 :(得分：-1)

curtisdf已经回答了图片放置的问题，但就第1列到第2列自由流动文本而言，最简单的方法是使用CSS 3列。您可以通过向网站添加现代化程序，使CSS 3列适用于不支持CSS 3的浏览器。

Modernizer：http://www.modernizr.com/

CSS 3列：http://www.w3.org/TR/css3-multicol/

相关问题
最新问题