页面布局 - 在 3 列中有图片块

Question

我已阅读 post A clean CSS3 3-column layout, where to start?，但我仍然遇到具有 3 列且中间列为水平线的照片网格布局的问题。但是，我得到的图片水平排列在左栏中，而在右栏中，它的排列更像是 2 x 2 的网格，但图片大小有所不同。

所以，基本上，我想在左栏中以 2 x 2 的大小放置 4 张图片，并且以兼容的方式在右栏中放置相同的图片（如果可能的话，还要添加一个栏标题） .

我尝试的方法是：

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Picture World</title>
        <link rel="stylesheet" type="text/css" href="style.css" >    
      </head>

      <body>

    <div id="header">   
     <header>

        <div id="header-left"><img src="/images/portal/logo.png" alt="logo" width="350" height="150"></div>
        <div id="header-right"><a href="/contactus">Contact Us</a></div>
        <div style="clear: both"></div>   

    </header>

    </div>

        <h1>
            Welcome!  
        </h1>
    </div>

    <div id="nav">

        <div id="leftmenu">

            <p><a href="/home">Home</a></p>

            <p><a href="/aboutus">About Us</a></p>

            <p><a href="/ebook">E-Book</a></p>

            <p><a href="/emagazine">E-Magazine</a></p>

            <p><a href="/links">Links</a></p>

        </div>
    </div>

    <div id="leftmainsection">

    <div class="img">
      <a href="/ebook/001.pdf"> <img src="images/books/001.jpg" alt="Book 1"></a>
      <div class="desc">Author 1</div>
    </div>

    <div class="img">
      <a href="/ebook/002.pdf"> <img src="images/books/002.jpg" alt="Book 2"></a>
      <div class="desc">Author 2</div>
    </div>

    <div class="img">
      <a href="/ebook/003.pdf"> <img src="images/books/003.jpg" alt="Book 3"></a>
      <div class="desc">Author 3</div>
    </div>

    <div class="img">
      <a href="/ebook/004.pdf"> <img src="images/books/004.jpg" alt="Book 4"></a>
      <div class="desc">Author 4</div>
    </div>


      <div id="horizontal">
      </div>

      <div id="rightmainsection">


      <div class="img">
      <a href="/emagazine/001.pdf"> <img src="images/magazines/d001.jpg" alt="Book 1"></a>
      <div class="desc">Mag 1</div>
      </div>

      <div class="img">
      <a href="/emagazine/002.pdf"> <img src="images/magazines/d002.jpg" alt="Book 2"></a>
      <div class="desc">Mag 2</div>
      </div>

      <div class="img">
      <a href="/emagazine/003.pdf"> <img src="images/magazines/d003.jpg" alt="Book 3"></a>
      <div class="desc">Mag 3</div>
     </div>

      <div class="img">
      <a href="/emagazine/004.pdf"> <img src="images/magazines/d004.jpg" alt="Book 4"></a>
      <div class="desc">Mag 4</div>
      </div>

      </div>

      <div id="footer">

        <footer>
            <div id="footer-left">Copyright &copy; 2016 PWC Ltd</div>
            <div id="footer-right"><a href="/contactus">Contact Us</a></div>
            <div style="clear: both"></div>   

        </footer>

    </div>


      </div>


      </body>
    </html>

我的 CSS 是：

    body {
        background: white;  
    }

    .content {
        padding: 25px;
    }


    #header-left {
        float: left;
    }

    #header-right {
        float: right;
    }

    #header-centre {
        overflow: hidden;
    }


    #header {
        background-color:white;
        color:black;
        /* text-align:center; */
        padding:5px;
    }

    #nav {
        line-height:30px;
        background-color:white;
        height:400px;
        width:100px;
        float:left;
        padding:5px; 
    }

    .sidemenu {
        width: 25%;
        background-color: white;
        border: 1px solid black;
    }


    #leftbodysection {
        width:50px;
        float:left;
        padding:10px; 
    }
    #rightbodysection {
        width:50px;
        float:right;
        padding:10px; 
    }
    #footer {
        background-color:blue;
        color:white;
        clear:both;
        text-align:center;
        padding:5px; 
    }


    #footer-left {
        float: left;
    }

    #footer-right {
        float: right;
    }

    #footer-centre {
        overflow: hidden;
    }

    #horizontal {
        line-height:30px;
        background-color:white;
        height:400px;
        width:20px;
        float:left;
        padding:5px; 
    }

    hr { 
        display: block;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-left: auto;
        margin-right: auto;
        border-style: inset;
        border-width: 1px;
    }


    div.img {
        margin: 5px;
        border: 1px solid #ccc;
        float: left;
        width: 180px;
    }   

    div.img:hover {
        border: 1px solid #777;
    }

    div.img img {
        width: 100%;
        height: 100%;
    }

    div.desc {
        padding: 15px;
        text-align: center;
    }

请问我该如何解决？

Answer 1

最简单的方法示例：

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="jumbotron.css" rel="stylesheet">
  </head>


    <body>
        <div class="container">
        <div class="column-center"><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
        <div class="column-left"><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
        <div class="column-right"><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
        </div>
    </body>
</html>

CSS

.column-left{ 
    float: left; 
    width: 33%; 

    }
.column-right{ 
    float: right;
    width: 33%;

    }
.column-center{ 
    display: inline-block;
    width: 33%;

    }

Answer 2

实现此目的的两种简单方法：

1- 图像的简单 Flex 网格（33.3% 宽度）：

body {
  width: 100%;
  height: 100vh;
  margin: 0;
}

.container {
    display: -webkit-flex; /* Safari */    
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around; /* Safari 6.1+ */    
    justify-content: space-around;
}

.container div {
  -webkit-flex: 0 0 calc(33.3% - 20px); /* Safari 6.1+ */
  -ms-flex: 0 0 calc(33.3% - 20px); /* IE 10 */ 
  flex: 0 0 calc(33.3% - 20px);  
  background: lavender;
  border: 2px solid black;
  box-sizing: border-box;
  margin: 10px;
  text-align: center;
}

.container img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

<div class="container">
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
</div>

ps：示例中的-20px calc(33.3% - 20px);表示保证金值的2倍（即10px）

2- CSS 多列：

body {
  width: 100%;
  height: 100vh;
  margin: 0;
}

.container {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 10px; /* Chrome, Safari, Opera */
    -moz-column-gap: 10px; /* Firefox */
    column-gap: 10px;
    padding: 10px;
}

.container div {
  width: 100%;
  display: inline-block;  
  background: lavender;
  border: 2px solid black;
  box-sizing: border-box;
  text-align: center;
  margin-bottom: 10px;
}

.container img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

<div class="container">
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div><img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
</div>

Codepen DEMO

ps2：我的建议是使用@media queries让它在小型设备上变成2或1列网格。

Source: w3schools

页面布局 - 在 3 列中有图片块

Page Layout - Having picture tiles in 3 columns

html

css

cross-browser