左右容器不是同一个高

Question

左边和右边的容器有问题。在右侧，我在div中键入的文本比左侧的文本长，这会导致问题。

截图：

我绘制了红线以显示左侧所属的位置。

我的代码是：

#container-pro {
  padding-top: 50px;
  width: 800px;
  height: 850px;
  margin: 0 auto;
  color: black;
  text-align: left;
  overflow: auto;
}

#left-pro {
  width: 200px;
  float: left;
}

#right-pro {
  width: 600px;
  float: right;
}

<div id="container-pro">
  <div id="left-pro">
    <p2>Projectname</p2>
  </div>
  <div id="right-pro">
    <p3>WheTo (WhereTo)</p3>
  </div>

  <div id="left-pro">
    <p2>Description</p2>
  </div>
  <div id="right-pro">
    <p3>This app was made for android devices. Searching and listing of nearby pubs and restaurants using the Google Maps Service. A tooltip will popup after you click on one of the listed places. Additional: Login and registration area for the user. The
      database was on an external web server.</p3>
  </div>

  <div id="left-pro">
    <p2>Period</p2>
  </div>
  <div id="right-pro">
    <p3>Apr 2016 - Jun 2016</p3>
  </div>

  <div id="left-pro">
    <p2>Role</p2>
  </div>
  <div id="right-pro">
    <p3>Projectleader and Softwaredeveloper</p3>
  </div>

  <div id="left-pro">
    <p2>Occupation</p2>
  </div>
  <div id="right-pro">
    <p3>Development and design of the application for Android devices</p3>
  </div>

  <div id="left-pro">
    <p2>Technologies</p2>
  </div>
  <div id="right-pro">
    <p3>
      Android Studio and SQL Database Server <br> SDK Version 23<br> Material Design<br> Database: PHP, MySQL<br> Google Maps Service: Geolocation API, Google Places API Web Service<br> JSON
      <br> PHP
      <br> XML
    </p3>
  </div>

</div>

Answer 1

有很多方法可以解决您的布局问题。想想CSS表，flexbox甚至定义列表。我在这里，我只是将您的浮动div转换为inline-block

N.B。 （如评论中所述）您的HTML标记无效。

＆＃13;

＆＃13;

   #container-pro {
    padding-top: 50px;
    width: 800px;
    height: 850px;
    margin: 0 auto;
    color: black;
    text-align: left;
    overflow:auto;
}

#left-pro {
display:inline-block;
    width: 200px;
    margin-right:-4px;/* negative margin to cope with your linebreaks */
    vertical-align:top;
    }

#right-pro {
display:inline-block;
    width: 600px;
}

＆＃13;

<div id="container-pro">
                 <div id="left-pro"> 
                    <p2>Projectname</p2>
                </div>
                <div id="right-pro">
                    <p3>WheTo (WhereTo)</p3>
                </div>

                <div id="left-pro"> 
                    <p2>Description</p2>
                </div>
                <div id="right-pro">
                    <p3>This app was made for android devices. Searching and listing of nearby pubs and restaurants using the Google Maps Service. A tooltip will popup after you click on one of the listed places. Additional: Login and registration area for the user. The database was on an external web server.</p3>
                </div>

                <div id="left-pro"> 
                    <p2>Period</p2>
                </div>
                <div id="right-pro">
                    <p3>Apr 2016 - Jun 2016</p3>
                </div>

                <div id="left-pro"> 
                    <p2>Role</p2>
                </div>
                <div id="right-pro">
                    <p3>Projectleader and Softwaredeveloper</p3>
                </div>

                <div id="left-pro"> 
                    <p2>Occupation</p2>
                </div>
                <div id="right-pro">
                    <p3>Development and design of the application for Android devices</p3>
                </div>

                <div id="left-pro"> 
                    <p2>Technologies</p2>
                </div>
                <div id="right-pro">
                    <p3>
                        Android Studio and SQL Database Server <br>
                        SDK Version 23<br>
                        Material Design<br>
                        Database: PHP, MySQL<br>
                        Google Maps Service: Geolocation API, Google Places API Web Service<br>
                        JSON<br>
                        PHP<br>
                        XML
                    </p3>
                </div>

            </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将你的id转换为类，p2和p3转换为p并清除float：

#container-pro {
  padding-top: 50px;
  width: 800px;
  height: 850px;
  margin: 0 auto;
  color: black;
  text-align: left;
  overflow: auto;
}

.left-pro {
  width: 200px;
  float: left;
  clear: both;
}

.right-pro {
  width: 600px;
  float: right;
}

<div id="container-pro">
  <div class="left-pro">
    <p>Projectname</p>
  </div>
  <div class="right-pro">
    <p>WheTo (WhereTo)</p>
  </div>

  <div class="left-pro">
    <p>Description</p>
  </div>
  <div class="right-pro">
    <p>This app was made for android devices. Searching and listing of nearby pubs and restaurants using the Google Maps Service. A tooltip will popup after you click on one of the listed places. Additional: Login and registration area for the user. The
      database was on an external web server.</p>
  </div>

  <div class="left-pro">
    <p>Period</p>
  </div>
  <div class="right-pro">
    <p>Apr 2016 - Jun 2016</p>
  </div>

  <div class="left-pro">
    <p>Role</p>
  </div>
  <div class="right-pro">
    <p>Projectleader and Softwaredeveloper</p>
  </div>

  <div class="left-pro">
    <p>Occupation</p>
  </div>
  <div class="right-pro">
    <p>Development and design of the application for Android devices</p>
  </div>

  <div class="left-pro">
    <p>Technologies</p>
  </div>
  <div class="right-pro">
    <p>
      Android Studio and SQL Database Server <br> SDK Version 23<br> Material Design<br> Database: PHP, MySQL<br> Google Maps Service: Geolocation API, Google Places API Web Service<br> JSON
      <br> PHP
      <br> XML
    </p>
  </div>

</div>

Answer 3

在容器上使用flexbox ..

https://www.codeply.com/go/fjikDo3uN1

#container-pro {
  padding-top: 50px;
  width: 800px;
  height: 850px;
  margin: 0 auto;
  color: black;
  text-align: left;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
}

还使用类而不是重复的id ..

.left-pro {
  width: 200px;
}

.right-pro {
  width: 600px;
}