个人中心
gpt4 book ai didi

html - 带有不规则插图的两列文本布局

转载 作者：太空宇宙 更新时间：2023-11-03 19:35:05 26 4
gpt4 key购买 nike

一图胜千言:

layout

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

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

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

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

关于已知维度的更新:

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

更新:

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

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

如果 inset 在文本的末尾，它显示在底部的右栏中，在 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>

最佳答案

如何在单独的 CSS 层中制作带有标题的图像，并将其“固定”到正确的位置，再加上一些负责将内容从下面推出的 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

关于html - 带有不规则插图的两列文本布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7946649/

26 4 0
文章推荐： Python:数字到字节
文章推荐： IDE 内和外的 Python Unicode
文章推荐： python - Django图像字段: files dont get uploaded
文章推荐： c# - 如何在拖动时滚动 flowlayoutpanel？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com