html - 如何使用纯 CSS/HTML 在具有动态高度的 DIV 中定位图像？-6ren

html - 如何使用纯 CSS/HTML 在具有动态高度的 DIV 中定位图像？

转载作者：行者123 更新时间：2023-11-28 05:57:15

25

4

我有一个 DIV，里面有两个列 DIV。主 DIV 的高度未定义，而是调整为第二列中的文本。

我的问题是:如何将图像放在第一列中，例如。从第二列文本开始的 80%。我尝试简单地设置 top: 80% 但浏览器会忽略它并将图像放在列的顶部。

注意:我知道我可以通过 Javascript/jQuery 获取主 DIV 的高度(以 px 为单位)，然后手动将第一列的高度设置为该高度，但我需要的解决方案应该只使用 CSS/HTML。

我的代码:

<!doctype html>
<html>
<head>
<meta content="charset=UTF-8">

<style type= "text/css">
html{
    height:100%;
    margin: 0;
}
body {font-family: Georgia; height:99%; margin: 0.25% 0}
div {position: relative}
p {text-align: justify; font-size: 15pt; margin-left: 0}
img {position:absolute}

#cntr {
    width: 1200px;
    display: block;
    top: 0;
    float: none;
    margin: 0 auto;
    background-color: white;
    min-height:100%;
    }
</style>
</head>

<body style="background-color: #708090">
<div id="cntr">
<div style="left:50px; width:1100px">
<div style="width:300px; height:100%">
<img src="zdj/cho1.jpg" style="top: 80%">
</div>
<div style="left:350px; width:750px">
/* some long <p>'s of text here */
</div>
</div>
</div>
</body>
</html>

感谢您的任何建议。

编辑:80% 是指文本 DIV 的高度(例如，如果文本高 2000 像素，那么我希望图像从第一列顶部的第 1600 个像素开始。

最佳答案

流畅的布局 + position:relative 可能会起作用(即使我没有完全理解这里的要点)。该图像的大小，溢出的容器，....

<div id="cntr">
  <div style="display:table;table-layout:fixed; width:1100px;border:solid;margin-bottom:100px;">
    <div style="width:300px; display:table-cell;position:relative;text-align:center">
      <img src="http://dummyimage.com/100x100/&text=What_Size" style="position:absolute;top: 80%">
    </div>
    <div style="display:table-cell;border:solid; width:750px">
      <p>some long 's of text here</p>
    </div>
  </div>
  <hr/>
  <div style="display:table;table-layout:fixed; width:1100px;border:solid;">
    <div style="width:300px; display:table-cell;position:relative;text-align:center">
      <img src="http://dummyimage.com/100x100/&text=What_Size" style="position:absolute;top: 80%">
    </div>
    <div style="display:table-cell;border:solid; width:750px">
      <h1>HTML Ipsum Presents</h1>

      <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
        placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
        tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

      <h2>Header Level 2</h2>

      <ol>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
      </ol>

      <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus
          turpis elit sit amet quam. Vivamus pretium ornare est.</p>
      </blockquote>

      <h3>Header Level 3</h3>

      <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
      </ul>

      <pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
    </div>

此外，如果图像不必在 HTML 中，背景位置也可以:

div {
  padding-left:300px;
  width:800px;
  border:solid;
  margin:auto;
  background:url(http://dummyimage.com/100x100/ff00ff/00ff00&text=80perc_from_top) no-repeat 20px 80%
}

<div >
      <h1>HTML Ipsum Presents</h1>

      <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
        placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
        tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

      <h2>Header Level 2</h2>

      <ol>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
      </ol>

      <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus
          turpis elit sit amet quam. Vivamus pretium ornare est.</p>
      </blockquote>

      <h3>Header Level 3</h3>

      <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
      </ul>

      <pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
    </div>

关于html - 如何使用纯 CSS/HTML 在具有动态高度的 DIV 中定位图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37004961/

25

4

0

文章推荐： ios - 使 UITableView 中的最后一行出现在顶部

文章推荐： javascript - 如何在滚动页面时逐渐调整图像大小？

文章推荐： c++ - 是否有可用于防止转义字符被识别的标准库函数？

文章推荐： swift - 对象 [89368] : Class VCWeakObjectHolder is implemented in both

c# - [纯] 函数可以抛出异常吗？
可以抛出异常的函数可以有[pure]属性吗？最佳答案根据 https://msdn.microsoft.com/en-us/library/system.diagnostics.contracts
纯 CSS 推送导航不会隐藏
我使用的是纯 css 推送导航。它工作得很好，但是我不知道如何在单击导航链接时隐藏菜单。您必须手动单击菜单图标才能使菜单返回隐藏状态。但是，当单击链接并且站点跳转到某个部分时，我希望菜单自动滑入隐藏状
纯 CSS 下拉菜单项显示
我正在尝试让纯 CSS 下拉菜单正常工作。它在很大程度上确实有效，除了其他内容似乎显示出来但我不知道为什么。 http://jsfiddle.net/uQveP/4/ 有人可以告诉我我做错了什么吗？
纯 C 中的回调函数
这个问题在这里已经有了答案: What is a "callback" in C and how are they implemented? (9 个回答) 关闭 8 年前。我正在以这种方式实现回
html - 纯 HTML 后退按钮
我想在不使用 Javascript 或任何其他语言的情况下，使用 HTML 和 CSS 创建一个 Page Back Button。我想用纯 HTML 和 CSS 来完成。我进行了搜索，但每次代码中
prolog - 纯 Prolog 中的目标顺序
我对序言很陌生。据我所知，Pure Prolog 仅限于 Horn 子句。这是一个非常简单的序言程序 - % student( Snr , FirstName , LastName ,
html - 纯 CSS 加载指示器适合容器大小
我想在加载数据时对容器使用以下加载指示器。问题是， slider 具有固定的宽度和高度(300 像素和 300 像素)，但我希望它能够动态适应容器。当我尝试添加宽度时:140px；和高度:140px
html - 纯 css 滚动阴影
当内容超过可用宽度时，我需要启用滚动阴影。这是我试图用纯 css(没有 JS)来实现的。我遇到了很多文章，可以使用 css 多背景和背景附件来实现。如果内容是文本类型，则可以使用下面的 jsfilld
regex - 纯 Lua 中功能齐全的正则表达式库
我正在编写一个上古卷轴在线插件，它由一个名为 Havok Script 的轻微修改的 Lua 5.1 引擎支持。 .这个Lua环境不允许访问os , io , package , debug模块或任何
纯 C 语言的 Arduino
我自己尝试过将 Arduino 库编译成他们自己的独立库并链接到 Eclipse 中的一个项目，但在此过程中遇到了一些问题。是否有关于如何启动和运行的体面指南？我一直很难在网上找到一个真正有效的..
javascript - 从本地存储中仅删除选定的列表项 - 纯 JS
我在这里遇到了一些麻烦。我正在尝试使用本地存储创建一个待办事项列表，但我唯一要做的就是将列表项添加到本地存储并删除所有项目从本地存储中删除，但我无法从列表中删除单个 SELECTED 项目。有人可
html - 纯 CSS 响应式文字效果
我的问题很简单。考虑以下 CodePen .是否有可能仅使用 css 就可以获得相同的结果？换句话说，如果不使用 javascrip 如何做到这一点？非常感谢! Nachos are
angularjs - 纯 angularjs 滚动事件监听器
我正在使用没有 jquery 的 angularjs，并尝试创建滚动事件监听器。尝试过这种方法: $rootScope.$watch(function() { return $windo
javascript - 纯 WebGL 虚线
我正在尝试使用纯 webgl 创建虚线。我知道这已经有一个问题，也许我很笨，但我不知道如何让它发挥作用。我理解这个概念，但我不知道如何在着色器中获取沿路径的距离。以前的答案有以下行: varying
javascript - 纯 JavaScript 工具提示
我正在尝试用纯 JavaScript 制作工具提示，显示在 hover .就像 Stack Overflow 中将鼠标悬停在配置文件名称上的一个 div显示。我尝试使用 onmouseover ,
javascript - 纯 JavaScript 添加监听器到加载的新元素
我想要通过 AJAX 将监听器添加到新元素的想法: 例如，现在我有 hello world 我为每个添加了一个监听器，但是当我通过 AJAX 加载新元素时，它没有监听器；我不完全确定问题是什么。
javascript - 各种日期的动态倒计时时钟 - 纯 Javascript
如果我错误地提出了这个问题，或者之前已经有人问过并回答过这个问题，我提前表示歉意。我的搜索发现了类似的基于 JQuery 和/或静态日期的问答，我正在寻找具有动态日期的纯 JavaScript 解决方
multithreading - 纯 Haskell 代码是否需要线程池？
在 Real World Haskell, Chapter 28, Software transactional memory ，开发了一个并发的网络链接检查器。它获取网页中的所有链接，并使用 HEA
javascript - 纯 JavaScript 将图像拖到浏览器
我正在尝试取消 jQuery-fy 一个聪明的 piece of code ，但有点太聪明了。目标是simple 。将图像从桌面拖动到浏览器。在这次 unjQueryfication 过程中，我发
javascript - 纯 Javascript end()
如何重新创建 jQuery end() $('#id') .find('.class') .css('font',f) .end() .find('.seven') .css(b,'red') 我有什

首页

博学

6Ren·AI

商城

html - 如何使用纯 CSS/HTML 在具有动态高度的 DIV 中定位图像？