Question

我正在建立一个网站，我一直在努力让两个或更多<div>彼此相邻。

这是我的代码：

＆＃13;

/*---MAKE PAGE---*/

body {
  background: lightblue;
}
.navbar {
  background: lightgreen;
  height: auto;
  width: 1840px;
  float: left;
  margin: 20px;
  padding-left: 10px;
}
.navbar_objects {
  text-decoration: none;
  float: left;
}
.navobj {
  text-decoration: none;
  color: #3399FF;
  float: left;
  margin: 20px;
}
.navobj:hover {
  color: white;
}
#title_of_page {
  color: darkblue;
  margin: 20px;
  padding-left: 880px;
}
.title {
  padding-top: 1px;
  height: 75px;
  width: 1850px;
  background: lightgreen;
  margin: 20px;
}
#title_recent {
  color: darkblue;
  margin: 20px;
  padding-left: 300px;
  padding-bottom: 20px;
}
.main {
  height: 2000px;
  width: 1810px;
  background: lightgreen;
  padding: 20px;
  padding-left: 200px;
  margin: 20px;
}
/*---END---*/

/*----------------START DESCRIPTIONS----------------*/

/*---START FIFA DESCRIPTION---*/

#image_div_recent_fifa16 {
  margin: 0px;
  height: 235px;
  width: 250px;
  float: left;
}
#text_div_recent_fifa16 {
  float: right;
  font-size: 20px;
  width: auto;
  height: auto;
}
/*---END---*/

/*---START NBA CODE---*/

#image_div_recent_nba {
  margin: 0px;
  height: 235px;
  width: 250px;
  float: left;
}
#text_div_recent_nba {
  float: right;
  font-size: 20px;
  width: auto;
  height: auto;
}
/*---END---*/

/*----------------CODE FOR POSTS----------------*/

/*---START FIFA POST CODE---*/

#post_fifa {
  width: 250px;
  height: 450px;
  padding: 20px;
  margin: 10px;
}
#post_fifa:hover {
  border: solid black 1px;
}
/*---END---*/

/*---START NBA POST CODE---*/

#post_nba {
  width: 250px;
  float: up;
  height: 450px;
  margin: 10px;
  padding: 20px;
}
#post_nba:hover {
  border: solid black 1px;
}

＆＃13;

<html>

<head>

  <title>GameGo - Home</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">

</head>

<body>

  <div class="navbar">

    <li class="navbar_objects">
      <a class="navobj" href="index.html">Home</a>
      <a class="navobj" href="games.html">Games</a>
      <a class="navobj" href="reviews.html">Reviews</a>
      <a class="navobj" href="contactus.html">Contact Us</a>
    </li>

  </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div class="title">

    <h1 id="title_of_page">Home</h1>

  </div>

  <div class="main">

    <h2 id="title_recent">Recent</h2>

    <br>
    <div class="posts">

      <div id="post_fifa">

        <div class="image_div_recent_fifa16">
          <img src="\\ISB-AD2012\Secondary Students\Grade 9\Paul\ICT\Grade 9\9.3 Web Design\fifa16logo.png" class="img_text_recent">
        </div>

        <div id="text_div_recent_fifa16">
          <p class="class_text_recent">FIFA 16 - Fifa 16 is a football game available on most gaming platforms(Xbox one, PS4, PC, PS3, Xbox 360, Wii U). It is a very good game to play with friends, family or other. You can play 4 player co op on same console.
          </p>
        </div>

      </div>

      <div id="post_nba">

        <div class="image_div_recent_nba">
          <img src="\\ISB-AD2012\Secondary Students\Grade 9\Paul\ICT\Grade 9\9.3 Web Design\fifa16logo.png" class="img_text_recent">
        </div>

        <div id="text_div_recent_nba">
          <p class="class_text_recent">FIFA 16 - Fifa 16 is a football game available on most gaming platforms(Xbox one, PS4, PC, PS3, Xbox 360, Wii U). It is a very good game to play with friends, family or other. You can play 4 player co op on same console.
          </p>
        </div>

      </div>

      <br>
      <br>

    </div>

  </div>

</body>

</html>

＆＃13;

我想将post_fif放在post_nba旁边。

Answer 1

尝试将display：inline-block添加到元素中：

#post_nba, #post_fifa {
  display: inline-block;
}

https://jsfiddle.net/L8w1owr4/

Answer 2

还有一个解决方案，浮动您的内容div：

#post_fifa,
#post_nba {
  float: left;
}

并且，请更正您的导航栏，现在代码无效！你可以：

 <ul class="navbar_objects">
   <li><a class="navobj" href="index.html">Home</a></li>
   <li><a class="navobj" href="games.html">Games</a></li>
   <li><a class="navobj" href="reviews.html">Reviews</a></li>
   <li><a class="navobj" href="contactus.html">Contact Us</a></li>
 </ul>

使用css类：

.navbar_objects {
  list-style-type: none;
  display: inline-block;
}
li {
  display: inline;
}
.navobj {
  text-decoration: none;
  color: #3399FF;
  margin: 20px;
}

jsfiddle-link

分隔线不是彼此相邻的

2 个答案: