HTML / CSS Div麻烦 - 坐在旁边但彼此之下

时间：2016-10-11 13:36:38

标签： html css image gallery

我真的很抱歉，如果之前已经多次回答，我确实尝试过搜索，但我找不到我想要的东西。

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

我多年来一直试图解决这个问题，但由于某种原因，我的图像列位于彼此的侧面（根据需要），但也在彼此之下，就像楼梯一样。我将在下面发布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>

4 个答案:

答案 0 :(得分：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;
}

答案 1 :(得分：0)

你正在寻找这样的东西吗？ 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;
}

答案 2 :(得分：0)

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

＆＃13;
＆＃13; 
/*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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

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

答案 3 :(得分：0)

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

＆＃13;
＆＃13; 
/*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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题