html - 左右容器不在同一高度

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 甚至定义列表。我在这里，我只是将您的 float div 转换为 inline-block

注意(如评论中所述)您的 HTML 标记无效。

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

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