Html 页面布局-在3列中具有图片分幅_Html_Css_Cross Browser

Html 页面布局-在3列中具有图片分幅

html css

Html 页面布局-在3列中具有图片分幅,html,css,cross-browser,Html,Css,Cross Browser,我已经读过这篇文章，但是我仍然遇到这样的问题：照片网格布局有3列，中间的一列是水平线。然而，我得到的图片在左栏水平排列，在右栏它的布局更像一个网格2 x 2，但图片大小不同因此，基本上，我希望在左栏中放置4张图片，大小为2 x 2，所有大小均为偶数，右栏中以兼容的方式放置相同的图片（如果可能，还可以添加一个列标题）我尝试的方法是： <!DOCTYPE html> <html> <head> <meta ch

我已经读过这篇文章，但是我仍然遇到这样的问题：照片网格布局有3列，中间的一列是水平线。然而，我得到的图片在左栏水平排列，在右栏它的布局更像一个网格2 x 2，但图片大小不同

因此，基本上，我希望在左栏中放置4张图片，大小为2 x 2，所有大小均为偶数，右栏中以兼容的方式放置相同的图片（如果可能，还可以添加一个列标题）

我尝试的方法是：

    <!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>

我怎样才能解决这个问题呢？

最简单的方法示例：

HTML

最简单的方法示例：

HTML

实现这一目标的两种简单方法：

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

正文{
宽度：100%；
高度：100vh；
保证金：0；
}
.集装箱{
显示：-webkit flex；/*Safari*/
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
-webkit内容：周围空间；/*Safari 6.1+*/
证明内容：周围的空间；
}
.货柜组{
-webkit flex:0计算（33.3%-20px）；/*Safari 6.1+*/
-ms flex:0计算（33.3%-20px）；/*即10*/
弹性：0计算（33.3%-20px）；
背景：薰衣草；
边框：2件纯黑；
框大小：边框框；
利润率：10px；
文本对齐：居中；
}
.集装箱img{
宽度：100%；
高度：自动；
垂直对齐：中间对齐；
}

实现这一点的两种简单方法：

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

正文{
宽度：100%；
高度：100vh；
保证金：0；
}
.集装箱{
显示：-webkit flex；/*Safari*/
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
-webkit内容：周围空间；/*Safari 6.1+*/
证明内容：周围的空间；
}
.货柜组{
-webkit flex:0计算（33.3%-20px）；/*Safari 6.1+*/
-ms flex:0计算（33.3%-20px）；/*即10*/
弹性：0计算（33.3%-20px）；
背景：薰衣草；
边框：2件纯黑；
框大小：边框框；
利润率：10px；
文本对齐：居中；
}
.集装箱img{
宽度：100%；
高度：自动；
垂直对齐：中间对齐；
}

您再次粘贴

html

代码，而不是

css

谢谢，刚刚注意到！您再次粘贴

html

代码，而不是

css

谢谢，刚刚注意到！很抱歉，我犯了一些错误，但现在还可以。感谢您的回答，但在您的示例中，尽管第3列中的图片显示在3列中，但第3列中的图片开始显示在列的下方，即最后一张图片在第1列和第2列中结束的位置。有什么办法吗？此外，我如何在列之间放置一条水平线，并可能为每列设置标题标题？我通过将33%的宽度大小减少1%至32%，修复了最后（第3）列开始在页面中显示较低的部分。谢谢。注意：在我的第一条评论中，我的意思是：如何在列之间放置一条垂直线，并为每个列设置标题？很抱歉，我犯了一些错误，但现在一切正常。感谢您的回答，但在您的示例中，尽管它似乎在3列中，第3列中的图片开始显示在列中较低的位置，即最后一张图片在第1列和第2列中结束的位置。有什么办法吗？此外，我如何在列之间放置一条水平线，并可能为每列设置标题标题？我通过将33%的宽度大小减少1%至32%，修复了最后（第3）列开始在页面中显示较低的部分。谢谢。注意：在我的第一个评论中，我的意思是：我如何在各栏之间画一条垂直线，并为每一栏设置标题？谢谢你的回答，但我想对每一栏中的内容进行更多的控制-有什么建议吗？此外，我用8张图片尝试了您的示例：前6张图片显示在3列中，但底部的最后两张图片与列不同步。@Jamie answer使用完全不同的方法编辑；我希望它能比之前的更有用。我尝试了你的新答案，但在Firefox中，所有12张图片都在一列中。还有其他建议吗？此外，我如何为每一列添加标题标题，并控制每一列的图像数量？如何做到这一点？例如，我可能希望每列有4幅图像。谢谢。警告：您必须使用百分比设置图像大小示例

宽度：100%

高度：自动

，而不是像素。谢谢您的回答，但我希望对每列中的内容进行更多控制-有何建议？此外，我用8张图片尝试了您的示例：前6张图片显示在3列中，但底部的最后两张图片与列不同步。@Jamie answer使用完全不同的方法编辑；我希望它能比之前的更有用。我尝试了你的新答案，但在Firefox中，所有12张图片都在一列中。还有其他建议吗？此外，我如何为每一列添加标题标题，并控制每一列的图像数量？如何做到这一点？例如，我可能希望每列有4幅图像。谢谢。警告：您必须使用百分比设置图像大小，例如

宽度：100%

高度：自动

，而不是像素。

    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;
    }

<!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>

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

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

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

    }