html - 如何将两个部分保持在同一行？

所以我正在做一个网站设计，其中两个部分彼此相邻，但是由于某种原因一个部分位于另一个部分之下。有人可以帮我找到问题吗？谢谢！

HTML代码：

<section id="sec1">
  <img src="https://tse1.mm.bing.net/th?&id=OIP.Mbd6b4f30000f7e872ca4c55c2cedd6fao0&w=300&h=215&c=0&pid=1.9&rs=0&p=0&r=0" id="img1">
  <h6 class="bodytext">Watershed Definition</h6>
  <p class="bodytext">A ridge or area of land that separates waters flowing to different rivers, basins, or seas</p>
</section>
<section id="sec2">
  <img src="http://www.nature-education.org/estuary.gif" id="img1">
  <h6 class="bodytext">Estuary Definition</h6>
  <p class="bodytext">An arm or inlet of the sea at the lower end of a river or body of water.</p>
</section>

CSS代码：

#sec1 {
background-color: #75c776;
width: 400px;
height: 550px;
margin-left: 300px;
margin-top: 40px;
border-radius: 5px;
border-style: solid;
clear: right;
}
#sec2 {
background-color: #75c776;
width: 400px;
height: 550px;
margin-left: 800px;
margin-top: 40px;
border-radius: 5px;
border-style: solid;
clear: left;
}

最佳答案

您似乎正在尝试浮动它们（通过使用clear：向左/向右）？

您虽然没有设置浮动...

如果将它们都向左浮动，则仅在第二个位置将其清除，这应该可行。如果没有足够的水平空间，它们只会彼此叠置。