如何从固定div的下方开始内容？

Question

我有一个div，其位置是固定的，显示在右侧。我有很多内容，内容应该从固定的div开始。

当我设置固定div时，是否有任何选项，内容始终从固定div下面开始？

.parent_img{
	position: fixed;
	right: 0;
}
.content, .content_2, .content_3{
	width: 700px;
}

<div class="parent_img">
	<img src="http://www.davidhill.co/wp-content/uploads/Free.jpg">
</div>

<div class="content">
	<h2>This is just for testing</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


<div class="content_2">
	<h2>This is just for testing 2</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="content_3">
	<h2>This is just for testing 3</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--many more-->

我收到了输出。

我需要这样的输出

Answer 1

只需将固定div的高度值（=图像的高度）用作第一个内容DIV的margin-top。

在您的情况下，图像高260像素，因此请使用：

.content {
  margin-top: 260px;
}

在下面的代码片段中，我实际上添加了20px以创建更多距离。我还在固定DIV中添加了一些其他设置（见下文），以便在向上滚动时，内容不会在图像的左侧或右侧部分可见。

＆＃13;

＆＃13;

.parent_img{
	position: fixed;
	right: 0;
  top: 0;
  width: 100%;
  background: #fff;
  text-align: right;
}
.content, .content_2, .content_3{
	width: 700px;
}
.content {
  margin-top: 280px;
}

＆＃13;

<div class="parent_img">
	<img src="http://www.davidhill.co/wp-content/uploads/Free.jpg">
</div>

<div class="content">
	<h2>This is just for testing</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


<div class="content_2">
	<h2>This is just for testing 2</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="content_3">
	<h2>This is just for testing 3</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--many more-->

＆＃13;

＆＃13;

＆＃13;

Answer 2

我重构了你的源代码。 Css修改

.parent_img{
    position: fixed;
    float:right;  
    width:50%;
    right:0;
}

img{
    max-width:100%;
 }

.content, .content_2, .content_3{
    width: 50%;
    float:left;
    clear:both;
    margin-top:200px;
    text-align:justify;
}

<div class="parent_img">
	<img src="http://www.davidhill.co/wp-content/uploads/Free.jpg">
</div>

<div class="content">
	<h2>This is just for testing</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


<div class="content_2">
	<h2>This is just for testing 2</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="content_3">
	<h2>This is just for testing 3</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--many more-->