Question

我将 #archive 和 #aboutGame 嵌套在相同的标记标记中，并希望这两个容器共享水平线。

换句话说 - 我希望 #archive 与 #aboutGame 的内容保持一致。很明显，这个文字和图片被向下推，因为我无法用 #archive 垂直放置它们。

#pageMain {
  position: relative;
  clear: both;
  margin: 100px;
  overflow: hidden;
}

#aboutGame {
  float: right;
  width: 430px;
  padding: 10px;
}

#aboutGame span {
  width: ;
  font-size: 20px;
  font-family: 'Lato', sans-serif;
}

#aboutGame img {
  border: 3px solid black;
  height: auto;
  max-width: 100%;
  display: block;
  margin: 20px 0;
}

#archive ul li {
  position: relative;
  margin: 30px;
  font-family: 'Roboto', sans-serif;
}

<section id="pageMain">
  <div id="archive">
    <ul>
      <li>MARCH - 2018</li>
      <li>FEBUARY - 2018</li>
      <li>JANUARY - 2018</li>
      <li>DECEMBER - 2017</li>
      <li>NOVEMBER - 2017</li>
    </ul>
  </div>
  <div id="aboutGame">
    <span>
			As if awakening from a deep sleep, you find yourself in a strange, contradictory world of ancient ruins and advanced technology. Tasked by your creator with solving a series of increasingly complex puzzles, you must decide whether to have faith, or to ask the difficult questions: Who are you? What is your purpose and what are you going to do about it? </span>
    <img src="http://cdn.akamai.steamstatic.com/steam/apps/257510/ss_ded5cd1a34df5b4d9015f71caf35db247b2579c4.1920x1080.jpg?t=1498680189" height="500px" width="800px" />
  </div>
</section>

Answer 1

只需使用"a,"所有浏览器都支持此功能

检查

#pageMain {
  display: flex;
  flex-flow: row nowrap;
}

#pageMain {
  position: relative;
  margin: 100px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

#aboutGame {
  width: 430px;
  padding: 10px;
}

#aboutGame span {
  font-size: 20px;
  font-family: 'Lato', sans-serif;
}

#aboutGame img {
  border: 3px solid black;
  height:auto;
  max-width: 100%;
  display: block;
  margin: 20px 0;
}

#archive ul li {
  position: relative;
  margin: 30px;
  font-family: 'Roboto', sans-serif;
}

Answer 2

从这里引导我，我让你的div彼此相邻。

#pageMain {
  position: relative;
  margin: 100px;
  display: flex;
}

#aboutGame {
  flex: 1;
  width: 430px;
  padding: 10px;
}

#aboutGame span {
  width: ;
  font-size: 20px;
  font-family: 'Lato', sans-serif;
}

#aboutGame img {
  border: 3px solid black;
  height:auto;
  max-width: 100%;
  display: block;
  margin: 20px 0;
}

#archive {
  flex: 1;
  margin: auto;
}

#archive ul li {
  position: relative;
  margin: 30px;
  font-family: 'Roboto', sans-serif;
}

<section id="pageMain">
  <div id="archive">
    <ul>
      <li>MARCH - 2018</li>
      <li>FEBUARY - 2018</li>
      <li>JANUARY - 2018</li>
      <li>DECEMBER - 2017</li>
      <li>NOVEMBER - 2017</li>
    </ul>
  </div>
  <div id="aboutGame">
    <span>
			As if awakening from a deep sleep, you find yourself in a strange, contradictory world of ancient ruins and advanced technology. Tasked by your creator with solving a series of increasingly complex puzzles, you must decide whether to have faith, or to ask the difficult questions: Who are you? What is your purpose and what are you going to do about it? </span>
    <img src="http://cdn.akamai.steamstatic.com/steam/apps/257510/ss_ded5cd1a34df5b4d9015f71caf35db247b2579c4.1920x1080.jpg?t=1498680189" height="500px" width="800px" />
  </div>
</section>

Answer 3

添加CSS

#pageMain {

     display: table;

}

#archive，＃aboutGame {

    display: table-cell;

    vertical-align: middle;

}

Answer 4

只需对您的CSS进行以下更改即可：

* {
    box-sizing: border-box;
}

#pageMain {
  position: relative;
  clear: both;
  margin: 100px;
  overflow: hidden;
}

#pageMain div {
    float: left;
    width: 50%;
    vertical-align: top;
}

#aboutGame {
  padding: 10px;
}

以下是我的JSFiddle供您参考：

Answer 5

使用Bootstrap。在头部添加：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

css。

#pageMain {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;    
}
#aboutGame {
  padding: 10px;
}
#aboutGame span {
  font-size: 20px;
  font-family: 'Lato', sans-serif;
}
#aboutGame img {
  border: 3px solid black;
  height: auto;
  display: block;
  margin: 20px 0;
}
#archive ul li {
  position: relative;
  margin: 30px;
  font-family: 'Roboto', sans-serif;
}

和HTML

  <section id="pageMain">
      <div id="archive" class="col-lg-6">
        <ul>
          <li>MARCH - 2018</li>
          <li>FEBUARY - 2018</li>
          <li>JANUARY - 2018</li>
          <li>DECEMBER - 2017</li>
          <li>NOVEMBER - 2017</li>
        </ul>
      </div>
      <div id="aboutGame" class="col-lg-6">
        <span>
                As if awakening from a deep sleep, you find yourself in a strange, contradictory world of ancient ruins and advanced technology. Tasked by your creator with solving a series of increasingly complex puzzles, you must decide whether to have faith, or to ask the difficult questions: Who are you? What is your purpose and what are you going to do about it? </span>
        <img src="http://cdn.akamai.steamstatic.com/steam/apps/257510/ss_ded5cd1a34df5b4d9015f71caf35db247b2579c4.1920x1080.jpg?t=1498680189" height="500px" width="800px" />
      </div>
    </section>

如何定位两个<div>元素以共享相同的垂直对齐？

5 个答案: