html - 页面布局 - 在 3 列中有图片 block-6ren

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

转载作者：太空宇宙更新时间：2023-11-04 02:30:56

我已阅读帖子 A clean CSS3 3-column layout, where to start? ，但我仍然遇到具有 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>

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

请问我该如何解决？

最佳答案

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

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

关于html - 页面布局 - 在 3 列中有图片 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36529454/

文章推荐： javascript - 创建多语言网站

文章推荐： javascript - 使用 browserify 和 Angular 动态要求

文章推荐： python - 将元素列表映射到 Pandas 中的元素类别？

文章推荐： node.js - Heroku 找不到这个特定的图像路径。为什么？

blockly - 在 blockly block 中读取用户输入的输入
我的 blockly.js 文件中有以下代码 Blockly.Blocks['account_number'] = { // Other type. init: function() {
Android将图像分成几 block 并获得等效大小的图像 block ( block )
首先抱歉我的英语不好，我正在开发 Image Splitter 应用程序并且已经完成，但是现在的要求是当图像被分割(分成几 block /chunks)那么图像 block 的每一 block (ch
block - smalltalk block - 我可以显式设置返回值并停止执行 block 吗？
#value: 消息的返回值，当发送到一个 block 时，是该 block 中最后一句话的值。所以 [ 1 + 2. 3 + 4. ] value 计算结果为 7。我发现有时很难使用。有没有办法显式
css - 当一个 block 高于其他 block 时，内联 block 对 block 应用顶部效果
我想构建一个包含 3 div 的响应式导航栏相同的 width和 height . 我申请了 inline-block到每个 block ，我得到一个我不理解的行为。问题是，第三 block 由 2
blockly - Blockly 有文件选择器吗？
我希望使用 Blockly 来允许非技术人员用户指定测试脚本。它的一部分需要一个文件选择器，但是，我看不到 Blockly 有一个。是吗？实际上，我找不到完整的标准 block 列表。谁有网址？
reactjs - 有没有办法在父 block 中知道您正在编辑该父 block 的内部 block ？
仅当您位于父 block 内部时，父 block 的 props.isSelected 才为 true，但当您在该 block 的 innerBlocks 内进行编辑时则不然。如何从父 block
reactjs - 有没有办法在父 block 中知道您正在编辑该父 block 的内部 block ？
仅当您位于父 block 内部时，父 block 的 props.isSelected 才为 true，但当您在该 block 的 innerBlocks 内进行编辑时则不然。如何从父 block
html - 我想创建一个具有不同背景颜色 block 和不同悬停颜色 block 的导航栏 block
我想创建一个具有不同背景颜色 block 和不同悬停颜色 block 的导航栏 block 。我可以分别创建不同的悬停颜色 block 或不同的背景颜色 block ，但不能一起创建。所以请告诉我如何
ios - block 指针变量 'block' 在被 block 捕获时未初始化
我正在使用看到的代码 here定期执行代码: #define DELAY_IN_MS 1000 __block dispatch_time_t next = dispatch_time(DISPATC
ios - 为什么必须复制 block 而不是保留 block ？什么时候不需要复制 block ？
为什么 block 必须被复制而不是保留？两者在引擎盖下有什么区别？在什么情况下不需要复制 block (如果有)？最佳答案通常，当您分配一个类的实例时，它会进入堆并一直存在，直到它被释放。但是，
ios - block block block ，用 __weak self
我想弄清楚我这样做是否正确: 如果我有一个 block ，我会这样做: __weak MyClass *weakSelf = self; [self performBlock:^{
javascript - 当单击部分中的每个 block 时，显示一个 block ，同时使用 jquery 隐藏其他 block 出现第二个 block ，第三个和第四个
我想制作一个 4 block 导航菜单，虽然我已经显示了一个 block ，然后单击打开第二个 block ，从第二个开始选择并再次单击出现第三个 block ，第四个 block 相同...这是我的
java - 最好在 try block 内有一个同步块(synchronized block)，还是在同步块(synchronized block)内有一个 try block ？
例如，这样更好吗？ try { synchronized (bean) { // Write something } } catch (Int
simulation - 尝试检查前方色 block 并根据前方色 block 的色 block 颜色做出决定
我想让一只乌龟检查前方小块的颜色并决定移动到哪里。如果前面的补丁不是白色的，那么乌龟向左或向右旋转并移动。我的 If 决策结构中出现错误，显示“此处应为 TRUE？FALSE，而不是 block 列表
在 block 矩阵的对角部分重复 block 矩阵多次，非对角 block 全部为零矩阵？
我想创建一个 block 对角矩阵，其中对角 block 重复一定次数，非对角 block 都是零矩阵。例如，假设我们从一个矩阵开始: > diag.matrix [,1] [,2] [
blockchain - 如何通过区 block 号访问以太坊区 block 链上一个区 block 的数据？
我是区 block 链新手。突然我有一个问题，我们是否可以通过区 block 号来访问以太坊区 block 链上之前的区 block 数据。例如我创建了一个block1、block2。 block
blockchain - 如何通过区 block 号访问以太坊区 block 链上一个区 block 的数据？
我是区 block 链新手。突然我有一个问题，我们是否可以通过区 block 号来访问以太坊区 block 链上之前的区 block 数据。例如我创建了一个block1、block2。 block
game-engine - 如何在不与其他图 block 重叠的情况下将等距对象从一个图 block 过渡到另一个图 block
我创建了一个等距环境，全部使用 Javascript 和 HTML5 (2D Canvas)，大部分情况下工作正常。我面临的问题是使用不同高度的图 block ，然后对图 block 上的对象索引进行
java - 如果try block 中有 "Where (true)" block ，是否会到达finally block ？
这是令我困惑的代码: public Integer getInteger(BlockingQueue queue) { boolean interrupted = false; try
c# - TPL 数据流转换 block 发布到批处理 block ，然后是操作 block
我有一个基于 TPL 数据流的应用程序，它仅使用批处理 block 和操作 block 就可以正常工作。我已经添加了一个 TransformBlock 以尝试在发布到批处理 block 之前从源中转

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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