HTML / CSS Div 麻烦 - 彼此相邻但位于下方答案

【问题标题】：HTML / CSS Div trouble - sitting next to but below each otherHTML / CSS Div 麻烦 - 彼此相邻但位于下方
【发布时间】：2017-02-20 01:43:33
【问题描述】：

如果这个问题已经被多次回答，我真的很抱歉，我确实尝试过搜索，但我找不到我要找的东西。

我只是为了练习/学习而玩弄不同的通用投资组合页面（我很新）。我正在尝试做的 atm 是布置一堵图像墙，带有导航区域的滚动保持固定。

多年来，我一直在尝试解决此问题，但由于某种原因，我的图像列彼此并排（根据需要），但也彼此下方，就像楼梯一样。我将在下面发布 HMTL / CSS，非常感谢您的帮助！

/*NAVIGATION*/

#navi {
  position: fixed;
  float: left;
}
#navi a {
  text-decoration: none;
  color: #969696;
}
#navi ul {
  list-style-type: none;
  margin-left: -40px;
  margin-top: 10px;
}
#navi h1 {
  color: #4A968F;
}
/*IMAGE WALL*/

img {
  max-width: 250px;
  margin-bottom: 10px;
}
#one {
  margin-left: 250px;
}
#two {
  margin-left: 510px;
}
#three {
  margin-left: 770px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="main">


    <!-- NAVIGATION -->
    <div class="container">
      <div class="row">
        <div class="col-md-3" id="navi">
          <h1>SR|BEST</h1>
          <ul>
            <li><a href="#">HOME</a>
            </li>
            <li><a href="#">PROJECTS</a>
            </li>
            <li><a href="#">TEXTS</a>
            </li>
            <li><a href="#">CONACT / ABOUT</a>
            </li>
          </ul>
        </div>



        <!-- IMAGE WALL -->
        <div class="rowone">
          <div class="col-md-3" id="one">
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-07-49.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/05/fi010513.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/04/sd.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/07/in.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/06/7.jpg" />
          </div>
        </div>

        <div class="rowtwo">
          <div class="col-md-3" id="two">
            <img src="https://srbest.files.wordpress.com/2013/04/17.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/04/1.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-04-31.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/06/1.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/06/ramsgate-sf2.jpg" />
          </div>
        </div>

        <div class="rowthree">
          <div class="col-md-3" id="three">
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-01-12.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-04-08-03-57.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/10/pr17.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/10/briavels.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/12/n-24.jpg" />
          </div>
        </div>
      </div>
    </div>


  </div>


</body>

</html>

【问题讨论】：

你应该阅读更多关于 CSS / Bootstrap 的内容。您的实施有很多问题。您可以从删除
容器（但仍保留内容）以及 id="two / three" 属性开始，然后从那里开始。
来源：-inmotionhosting.com/support/edu/website-design/…
是的，我知道，正如我所说，相当新。上面提到的那些是由于尝试解决我遇到的问题而失败的结果。我想我已经破解了。当我达到 100% 时，我会弹出它。

标签： html css image gallery

【解决方案1】：

这样的事情将是一个好的开始。 Bootstrap 可以为您处理列，因此您无需为这些列设置任何边距。粘性导航在这里并不是很理想，但应该可以工作。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="main">

    <!-- NAVIGATION -->
    <div class="container">
      <div class="row">
        <div class="col-md-3" id="navi">
          <h1>SR|BEST</h1>
          <ul>
            <li><a href="#">HOME</a>
            </li>
            <li><a href="#">PROJECTS</a>
            </li>
            <li><a href="#">TEXTS</a>
            </li>
            <li><a href="#">CONACT / ABOUT</a>
            </li>
          </ul>
        </div>



        <!-- IMAGE WALL -->
        <div class="col-md-9" id="wall">
          <div class="col-md-4">
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-07-49.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/05/fi010513.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/04/sd.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/07/in.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/06/7.jpg" />
          </div>

          <div class="col-md-4">
            <img src="https://srbest.files.wordpress.com/2013/04/17.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/04/1.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-04-31.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/06/1.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/06/ramsgate-sf2.jpg" />
          </div>

          <div class="col-md-4">
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-01-12.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-04-08-03-57.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/10/pr17.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/10/briavels.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/12/n-24.jpg" />
          </div>
        </div>
      </div>
    </div>


  </div>


</body>

</html>

还有 CSS：

/*NAVIGATION*/

#navi {
  position: fixed;
  top: 0;
  left: 20px;
}

#navi a {
  text-decoration: none;
  color: #969696;
}

#navi ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#navi h1 {
  color: #4A968F;
}

/*IMAGE WALL*/

#wall {
  margin: 20px 0 0 250px;
}

img {
  max-width: 100%;
  margin-bottom: 20px;
}

【讨论】：

【解决方案2】：

您正在寻找这样的东西吗？ https://jsfiddle.net/c8my23ap/

<!-- NAVIGATION -->
<div class="container">
  <div class="row">
    <div class="col-md-3" id="navi">
      <h1>SR|BEST</h1>
      <ul>
        <li><a href="#">HOME</a>
        </li>
        <li><a href="#">PROJECTS</a>
        </li>
        <li><a href="#">TEXTS</a>
        </li>
        <li><a href="#">CONACT / ABOUT</a>
        </li>
      </ul>
    </div>



    <!-- IMAGE WALL -->

      <div class="col-md-offset-3 col-md-3" id="one">
        <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-07-49.jpg" />
      </div>
      <div class="col-md-3">  
        <img src="https://srbest.files.wordpress.com/2013/04/17.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-01-12.jpg" />
      </div>
    </div>
      <div class="row">
      <div class="col-md-offset-3 col-md-3">
        <img src="https://srbest.files.wordpress.com/2013/05/fi010513.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2013/04/1.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2013/08/2012-09-04-08-03-57.jpg" />
      </div>          
      </div>

      <div class="row">
      <div class="col-md-offset-3 col-md-3">
        <img src="https://srbest.files.wordpress.com/2013/04/sd.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-04-31.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2012/10/pr17.jpg" />
      </div>  
    </div>
    <div class="row">
      <div class="col-md-offset-3 col-md-3">
        <img src="https://srbest.files.wordpress.com/2011/07/in.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2011/06/1.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2011/10/briavels.jpg" />
      </div>
      </div>
      <div class="row">
      <div class="col-md-offset-3 col-md-3">
        <img src="https://srbest.files.wordpress.com/2012/06/7.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2011/06/ramsgate-sf2.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2012/12/n-24.jpg" />
      </div>
    </div>
  </div>

/*NAVIGATION*/

#navi {
  position: fixed;
  float: left;
}
#navi a {
  text-decoration: none;
  color: #969696;
}
#navi ul {
  list-style-type: none;
  margin-left: -40px;
  margin-top: 10px;
}
#navi h1 {
  color: #4A968F;
}
/*IMAGE WALL*/

img {
  max-width: 250px;
  margin-bottom: 10px;
  text-align:center;
}

【讨论】：

【解决方案3】：

简化您的 HTML（以及扩展的 CSS）并使用 flexbox 可能更容易创建我认为您正在寻找的图像墙布局。请参阅下面的代码更新版本：

/*NAVIGATION*/
#navi {
  position: fixed;
  float: left;
}
#navi a {
  text-decoration: none;
  color: #969696;
}
#navi ul {
  list-style-type: none;
  margin-left: -40px;
  margin-top: 10px;
}
#navi h1 {
  color: #4A968F;
}

/*IMAGE WALL*/
#imgWall {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 250px;
}
#imgWall img {
  max-width: 250px;
  margin-bottom: 10px;
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="main">
    <!-- NAVIGATION -->
    <div class="container">
      <div class="row">
        <div class="col-md-3" id="navi">
          <h1>SR|BEST</h1>
          <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">PROJECTS</a></li>
            <li><a href="#">TEXTS</a></li>
            <li><a href="#">CONACT / ABOUT</a></li>
          </ul>
        </div>

        <!-- IMAGE WALL -->
        <div id="imgWall">
          <div class="col-md-3" id="one">
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-07-49.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/05/fi010513.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/04/sd.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/07/in.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/06/7.jpg" />
          </div>
          <div class="col-md-3" id="two">
            <img src="https://srbest.files.wordpress.com/2013/04/17.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/04/1.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-04-31.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/06/1.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/06/ramsgate-sf2.jpg" />
          </div>
          <div class="col-md-3" id="three">
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-01-12.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-04-08-03-57.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/10/pr17.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/10/briavels.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/12/n-24.jpg" />
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

有关 CSS FlexBox 的更多信息，请查看：Visual Guide to CSS3 Flexbox Properties

【讨论】：

【解决方案4】：

所以，我接受了这里所说的一些事情。我想我已经知道了，至少在我的电脑上全屏运行的基础上......非常感谢您的帮助！

/*NAVIGATION*/

#navi {
  position: fixed;
  float: left;
}
#navi a {
  text-decoration: none;
  color: #969696;
}
#navi ul {
  list-style-type: none;
  margin-left: -40px;
  margin-top: 10px;
}
#navi h1 {
  color: #4A968F;
}
/*IMAGE WALL*/

img {
  max-width: 250px;
  margin-bottom: 10px;
}

.imgwall {
  margin-left: 250px;
  margin-top: 30px;
}

#two {
  margin-left: 30px;
}

#three {
  margin-left: 30px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="main">


    <!-- NAVIGATION -->
    <div class="container">
      <div class="row">
        <div class="col-md-3" id="navi">
          <h1>SR|BEST</h1>
          <ul>
            <li><a href="#">HOME</a>
            </li>
            <li><a href="#">PROJECTS</a>
            </li>
            <li><a href="#">TEXTS</a>
            </li>
            <li><a href="#">CONACT / ABOUT</a>
            </li>
          </ul>
        </div>



        <!-- IMAGE WALL -->


        <div class="imgwall">
          <div class="col-md-3">
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-07-49.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/05/fi010513.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/04/sd.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/07/in.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/06/7.jpg" />
          </div>



          <div class="col-md-3" id="two">
            <img src="https://srbest.files.wordpress.com/2013/04/17.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/04/1.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-04-31.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/06/1.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/06/ramsgate-sf2.jpg" />
          </div>



          <div class="col-md-3" id="three">
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-01-12.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-04-08-03-57.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/10/pr17.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/10/briavels.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/12/n-24.jpg" />
          </div>
        </div>
      </div>
    </div>


  </div>


</body>

</html>

【讨论】：