Question

我需要制作一个包含不同Div的页面来制作行和列。第一行有三个div（宽度= 33％，高度= 25％）。我希望（垂直和水平）图像居中而不重新缩放它们（我使用溢出：隐藏来裁剪图像的其余部分）。我该如何居中？这就是我写的：

CSS

div.hiddenrow1 {
width: 33%;
height: 25%;
overflow:hidden;
display:inline-block;
text-align: center;
}

HTML

<!--Row 1-->
<!--Air 1-->
<div class="hiddenrow1"><img src="Gifs/gifs pom twix/air_skate.gif" class="img" /></div>

<!--Air 2-->
<div class="hiddenrow1"><img src="Gifs/gifs pom twix/air_sea.gif" class="img" /></div>

<!--Air 3-->
<div class="hiddenrow1"><img src="Gifs/gifs pom twix/air_diving.gif" class="img" /></div>

另外，对于第二行，是否可以将div定位为像列一样？这是我正在设计的最终结构的图像。 structure

PS：我不知道如何使用桌子而且我不确定它们是否适合这种情况，但是我向所有方向开放我会很感激，如果有人能帮我一把。< / p>

Answer 1

以下是如何在使用表格后实现目标的。

<table border="1" style="height:25%; width:100%;">
    <tr>
        <td style="width:33.33333333%">1</td>
        <td style="width:33.33333333%">2</td>
        <td style="width:33.33333333%">3</td>
    </tr>
</table>
<table border="1" style="height:50%; width:100%;">
    <tr>
        <td style="width:15%" rowspan="3"></td>
        <td style="width:15%"></td>
        <td rowspan="3"></td>
        <td style="width:15%"></td>
        <td style="width:15%" rowspan="3"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
<table border="1" style="height:25%; width:100%;">
    <tr>
        <td style="width:20%"></td>
        <td style="width:20%"></td>
        <td style="width:20%"></td>
        <td style="width:20%"></td>
        <td style="width:20%"></td>
    </tr>
</table>

使用css将图像添加到样式表中的每个td，将它们居中对齐：

td
{
    background-position: center;
    background-image: url(http://wac.450f.edgecastcdn.net/80450F/arcadesushi.com/files/2014/04/Goat-Simulator-Coffee-Stain-Studios.jpg);
}

Answer 2

http://jsfiddle.net/yLqz4/1

<table>
<!--Row 1-->
<!--Air 1-->
    <tr><td>
<div class="hiddenrow1"><img src="Gifs/gifs pom twix/air_skate.gif" class="img" /></div>
        </td></tr>

<!--Air 2-->
<tr><td>
    <div class="hiddenrow1"><img src="Gifs/gifs pom twix/air_sea.gif" class="img" /></div>
    </td></tr>
<!--Air 3-->
    <tr><td>
<div class="hiddenrow1"><img src="Gifs/gifs pom twix/air_diving.gif" class="img" /></div>
        </td></tr>
</table>

以上是我理解的小提琴。看看它并发布我如果你想进一步的帮助。我看不到任何图像，请检查源文件

Answer 3

要控制图像的位置和溢出，请将它们作为CSS背景图像而不是内联<img>标记放入，并使用背景位置：50％50％：

HTML

<div class="hiddenrow1 air1"></div>
<div class="hiddenrow1 air2"></div>
<div class="hiddenrow1 air3"></div>

CSS

.hiddenrow1 {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 33%; height: 25%; /* ...etc... */
    display: inline-block;
}

.air1 {
   background-image: url('Gifs/gifs%20pom%20twix/air_skate.gif');
}
.air2 {
   background-image: url('Gifs/gifs%20pom%20twix/air_sea.gif');
}
.air3 {
   background-image: url('Gifs/gifs%20pom%20twix/air_diving.gif');
}

对于你的“是否有可能将div定位为像列一样”的问题 - 我觉得我可能不理解你所要求的内容，因为你已经使用的代码应该完全正确：每个div占父节点宽度的33％，并且使用内联块它们不会强制清除display:block的方式，因此它们应该显示为包含三列的单行。（但请注意，除非您还使用box-sizing: border-box，否则在.air * div上包含边框或边距可能会导致第三项换行到下一行。）

图像居中，高度或宽度=原始图像的100％，图像Overflow Responsive Divs

3 个答案: