如何将我的两个部分保持在同一条线上？

Question

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

HTML code：

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

Answer 1

尝试此代码您将获得解决方案：）

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

Answer 2

你似乎试图漂浮它们（从使用clear：left / right）？

你没有浮动设置......

如果你把它们都向左漂浮，那么只在第二个漂亮，这应该工作。如果没有足够的水平空间，它们只会出现在彼此的顶部。