我有一个 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/