Question

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

我的问题是：如何在第一列中定位图像，所以它是例如。从第二列中的文本开头80％。我尝试只设置top: 80%，但浏览器会忽略它并将图像放在列顶部。

注意：我知道我可以通过Javascript / jQuery获取px中主DIV的高度，并手动设置第一列的高度，但我需要的解决方案应该只使用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的高度（例如，如果文本是2000px高，那么我希望图像从第一列顶部的第1600个像素开始。

Answer 1

我已经编辑了你的html和css，试试这个。现在你的图像和文字没有重叠。您可以根据需要将百分比从80％设置为任意百分比。

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

Answer 2

编辑你的#cntr css，如： -

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

Answer 3

流畅的布局+位置：相对可能会做（即使我没有得到这里的全部观点）。那个图像的大小，溢出的容器，......

＆＃13;

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

＆＃13;

除此之外，如果图像不必在HTML中，背景位置将会：

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: