2

我试图为一个网络项目制作一个图像网格，我打算做的是以下内容。！ 图片 所有的盒子都是图片，我需要覆盖 div 宽度的 50% 和高度的 100% [白框]。红色框将覆盖 div 宽度的 25% 和高度的 50%。我已经尝试使用图像位置和表格，这就是我得到 的图像，我想知道是否有更好的方法来制作这个。感谢您的帮助和时间:)

    <div class="source_miu">
                <table border="1">
                    <tr>
                        <th rowspan="2"><img src="http://ns223506.ovh.net/rozne/a0983fdf5e6616a0e8515ad95ef1e10e/wallpaper-664645.jpg"></th>
                        <td><img src="http://ns223506.ovh.net/rozne/a039b13699e8fcfd8f6c676279355546/wallpaper-357877.jpg"></td>
                        <td><img src="http://ns223506.ovh.net/rozne/5c5b16fd81a613372f43fdf0f89235d4/wallpaper-988986.jpg"></td>
                    </tr>
                    <tr>
                        <td><img src="http://ns223506.ovh.net/rozne/1ce14f71e1b760232ddb978a60ef6383/wallpaper-664196.jpg"></td>
                        <td><img src="http://ns223506.ovh.net/rozne/9353f6e8133cc441f096552bbdbe8ebd/wallpaper-69508.jpg"></td>
                    </tr>

                </table>
            </div>

CSS

    .source_miu{
    width:100%;
    padding:2%;
    background-color: #3c3c3c;
    }
    .source_miu table{
    width: 100%;
    }
   .source_miu table{
    padding: 0;
    margin: 0;
    width: 100%;
    }
   .source_miu table th{
   height: 50%;
   width:50%;
   }
   .source_miu table td{
   width: 25%;
   height: 50%;
   }
4

3 回答 3

1

这应该工作，小提琴。

HTML

<div class="container">
    <div class="left">
        <img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
    </div>
    <div class="right">
        <img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
        <img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
        <img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
        <img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
    </div>
</div>​

CSS

.container .left, .container .right
{
    display: inline-block;
    width: 50%;
    float: left;
}

.container .left img
{
    width: 100%;
}

.container .right img
{
    display: inline-block;
    width: 50%;
    float: right;
}
于 2012-10-19T16:57:35.023 回答
0

好吧，您可以确定图片的大小（以像素为单位），这样您就可以确保 25% 的图像具有相同的宽度和高度。

50px 仅用于示例。您可以玩它并尝试直到获得适合您的尺寸。

<img src="your image.jpg" width="50px" height="50px">
于 2012-10-19T16:58:44.727 回答
0

这也应该有效，避免使用display:inline-block;which 不适用于 IE7 或更低版本——尽管没关系也没关系；）

http://jsfiddle.net/H5npz/

标记：

<div class="panels">
  <img class="a" src="/favicon.png" />
  <img class="b" src="/favicon.png" />
  <img class="b" src="/favicon.png" />
  <img class="b" src="/favicon.png" />
  <img class="b" src="/favicon.png" />
</div>

CSS：

.panels {
  oveflow: hidden;
  width: 400px;
  height: 250px;    
}

.panels .a, .panels .b {
   float: left;
   display: block;
   margin: 0;
   padding: 0;
}

.panels .a {
   width: 50%;
   height: 100%;
}

.panels .b {
   width: 25%;
   height: 50%;
}
于 2012-10-19T17:11:37.783 回答