Html CSS网格布局/图像定位问题_Html_Css_Grid_Stylesheet

Html CSS网格布局/图像定位问题

html css grid

Html CSS网格布局/图像定位问题,html,css,grid,stylesheet,Html,Css,Grid,Stylesheet,在尝试将图像正确放置的页面组合在一起时遇到一些问题。屏幕截图附加什么，我现在有到位。如果有意义的话，我想看到的是沿着页面向下的第一行图像（1-5），每一行图像都是相反的。图像1-8设置正确，但9-10位于第3行，而不是我想要的第2行。图11应为左侧，图12-15应为右侧。等等当前css- #grid { float: left; width: 100%; overflow: hidden; } #grid-inner { float: left; width: 890px; over

在尝试将图像正确放置的页面组合在一起时遇到一些问题。屏幕截图附加什么，我现在有到位。如果有意义的话，我想看到的是沿着页面向下的第一行图像（1-5），每一行图像都是相反的。图像1-8设置正确，但9-10位于第3行，而不是我想要的第2行。图11应为左侧，图12-15应为右侧。等等

当前css-

    #grid { float: left; width: 100%; overflow: hidden; }
#grid-inner { float: left; width: 890px; overflow: hidden;  }
.item { float: left; margin: 0 0 10px 0; position: relative; }
.item span { display: none; position: absolute; padding: 0 0 0 0; color: #fff; background: transparent url('../images/back-work.png') 0 0 repeat; }
.item span a { color: #fff; display: block; height: 100%; width: 100%; }
.small { width: 210px; height: 125px; }
.large { width: 420px; height: 260px; }
.small span { width: 210px; height: 125px; padding: 0 0 0 0; }
.large span { width: 420px; height: 260px; padding: 0 0 0 0; }
#project { float: left; width: 100%; }
#project-content { float: left; width: 100%; border-top: 1px solid #ccc; margin: 0 0 0 0; padding: 0 0 0 0; }
#project-content-alpha { float: left; width: 200px; }
#project-content-beta { float: left; width: 410px; }
#project-content-gamma { float: right; width: 200px; text-align: right; }
    #project-content-alpha span.light { color: #999; }
#project-images { float: left; width: 100%; }
#project-images img { float: left; width: 100%; margin: 0 0 0 0; }
#project-pagination { float: left; width: 100%; margin: 0 0 0 0; }
#project-pagination-alpha { float: left; width: 200px; }
#project-pagination-beta { float: right; width: 200px; text-align: right; }

当前标记-

    <div id="grid">
<div id="grid-inner">


<div class="item large">
<span><a href="" title="">ONE</a></span>
<a href="" title="ONE"><img src="" width="420" height="260" alt="ONE" /></a>
</div>



<div class="item small">
<span><a href="" title="">TWO</a></span>
<a href="" title=""><img src="" width="210" height="125" alt="TWO" /></a>
</div>



<div class="item small">
<span><a href="" title="">THREE</a></span>
<a href="" title=""><img src="" width="210" height="125" alt="THREE" /></a>
</div>



<div class="item small">
    <span><a href="" title="">FOUR</a></span>
<a href="" title=""><img src="" width="210" height="125" alt="FOUR" /></a>
</div>



<div class="item small">
<span><a href="" title=""></a></span>
<a href="" title=""><img src="" width="210" height="125" alt="FIVE" /></a>
</div>



    <div class="item small">
<span><a href="" title=""></a></span>
<a href="" title=""><img src="" width="210" height="125" alt="SIX" /></a>
</div>



<div class="item small">
<span><a href="" title=""></a></span>
<a href="" title=""><img src="" width="210" height="125" alt="SEVEN" /></a>
</div>



<div class="item large">
<span><a href="" title=""></a></span>
<a href="" title=""><img src="" width="420" height="260" alt="EIGHT" /></a>
</div>

如果您对此有任何帮助或建议，我们将不胜感激。

提前谢谢

CSS

float

s不垂直重新定位元素。它们只能水平漂浮

如果您想要垂直“浮动”（即平铺），则需要使用JavaScript。我建议使用t或（jQuery减去jQuery）。

floats不要垂直重新定位元素。它们只能水平漂浮

如果您想要垂直“浮动”（即平铺），则需要使用JavaScript。我建议使用t或（jQuery减去jQuery）。

查看此处的接口。如果你需要修改，请告诉我

确切地说是要求什么-

HTML

<div class="wrap">
    <div class="row">
        <img class="lg" src="" alt="1" />
        <img class="sm" src="" alt="2" />
        <img class="sm" src="" alt="3" />
        <img class="sm" src="" alt="4" />
        <img class="sm" src="" alt="5" />
    </div>
    <div class="row">
        <img class="sm" src="" alt="6" />
        <img class="sm" src="" alt="7" />
        <img class="lg" src="" alt="8" />
        <img class="sm" src="" alt="9" />
        <img class="sm" src="" alt="10" />
    </div>
</div>

<div class="wrap">
  <img class="lg" src="" alt="1" />
  <img class="sm" src="" alt="2" />
  <img class="sm" src="" alt="3" />
  <img class="sm" src="" alt="4" />
  <img class="sm" src="" alt="5" />
  <img class="lg2" src="" alt="6" />
  <img class="sm" src="" alt="7" />
  <img class="sm" src="" alt="8" />
  <img class="sm" src="" alt="9" />
  <img class="sm" src="" alt="10" />
  <img class="lg" src="" alt="11" />
  <img class="sm" src="" alt="12" />
  <img class="sm" src="" alt="13" />
  <img class="sm" src="" alt="14" />
  <img class="sm" src="" alt="15" />
  <img class="lg2" src="" alt="16" />
  <img class="sm" src="" alt="17" />
  <img class="sm" src="" alt="18" />
  <img class="sm" src="" alt="19" />
  <img class="sm" src="" alt="20" />
</div>

.wrap {width:650px;}
.wrap img {float:left; width:150px; height:100px;}
.wrap img.lg {width:350px; height:200px;}
.row.odd .lg, .row:nth-child(even) .lg {float:right;}

$(function () {
    $('.row:odd').addClass('odd');
});

.wrap {width:500px;}
.wrap img {float:left; width:125px; height:100px;}
.wrap img.lg {width:250px; height:200px;}
.wrap img.lg2 {width:250px; height:200px;float:right;}

查看这里的界面。如果你需要修改，请告诉我

确切地说是要求什么-

HTML

<div class="wrap">
    <div class="row">
        <img class="lg" src="" alt="1" />
        <img class="sm" src="" alt="2" />
        <img class="sm" src="" alt="3" />
        <img class="sm" src="" alt="4" />
        <img class="sm" src="" alt="5" />
    </div>
    <div class="row">
        <img class="sm" src="" alt="6" />
        <img class="sm" src="" alt="7" />
        <img class="lg" src="" alt="8" />
        <img class="sm" src="" alt="9" />
        <img class="sm" src="" alt="10" />
    </div>
</div>

<div class="wrap">
  <img class="lg" src="" alt="1" />
  <img class="sm" src="" alt="2" />
  <img class="sm" src="" alt="3" />
  <img class="sm" src="" alt="4" />
  <img class="sm" src="" alt="5" />
  <img class="lg2" src="" alt="6" />
  <img class="sm" src="" alt="7" />
  <img class="sm" src="" alt="8" />
  <img class="sm" src="" alt="9" />
  <img class="sm" src="" alt="10" />
  <img class="lg" src="" alt="11" />
  <img class="sm" src="" alt="12" />
  <img class="sm" src="" alt="13" />
  <img class="sm" src="" alt="14" />
  <img class="sm" src="" alt="15" />
  <img class="lg2" src="" alt="16" />
  <img class="sm" src="" alt="17" />
  <img class="sm" src="" alt="18" />
  <img class="sm" src="" alt="19" />
  <img class="sm" src="" alt="20" />
</div>

.wrap {width:650px;}
.wrap img {float:left; width:150px; height:100px;}
.wrap img.lg {width:350px; height:200px;}
.row.odd .lg, .row:nth-child(even) .lg {float:right;}

$(function () {
    $('.row:odd').addClass('odd');
});

.wrap {width:500px;}
.wrap img {float:left; width:125px; height:100px;}
.wrap img.lg {width:250px; height:200px;}
.wrap img.lg2 {width:250px; height:200px;float:right;}

更好的方法是这样-

HTML

<div class="wrap">
    <div class="row">
        <img class="lg" src="" alt="1" />
        <img class="sm" src="" alt="2" />
        <img class="sm" src="" alt="3" />
        <img class="sm" src="" alt="4" />
        <img class="sm" src="" alt="5" />
    </div>
    <div class="row">
        <img class="sm" src="" alt="6" />
        <img class="sm" src="" alt="7" />
        <img class="lg" src="" alt="8" />
        <img class="sm" src="" alt="9" />
        <img class="sm" src="" alt="10" />
    </div>
</div>

<div class="wrap">
  <img class="lg" src="" alt="1" />
  <img class="sm" src="" alt="2" />
  <img class="sm" src="" alt="3" />
  <img class="sm" src="" alt="4" />
  <img class="sm" src="" alt="5" />
  <img class="lg2" src="" alt="6" />
  <img class="sm" src="" alt="7" />
  <img class="sm" src="" alt="8" />
  <img class="sm" src="" alt="9" />
  <img class="sm" src="" alt="10" />
  <img class="lg" src="" alt="11" />
  <img class="sm" src="" alt="12" />
  <img class="sm" src="" alt="13" />
  <img class="sm" src="" alt="14" />
  <img class="sm" src="" alt="15" />
  <img class="lg2" src="" alt="16" />
  <img class="sm" src="" alt="17" />
  <img class="sm" src="" alt="18" />
  <img class="sm" src="" alt="19" />
  <img class="sm" src="" alt="20" />
</div>

无需定义div中的每一行，因为它们将自动适应并环绕

另外，如果您首先在每行（左或右）浮动大图像，那么其他四个图像将在不需要任何javascript的情况下就位

每五个数字将是一个大图像（1、6、11、16、21等）。如果您希望它不使用javascript，那么就使用这个解决方案。如果您想保留原来的编号系统，请使用上述解决方案。

更好的方法如下-

HTML

<div class="wrap">
    <div class="row">
        <img class="lg" src="" alt="1" />
        <img class="sm" src="" alt="2" />
        <img class="sm" src="" alt="3" />
        <img class="sm" src="" alt="4" />
        <img class="sm" src="" alt="5" />
    </div>
    <div class="row">
        <img class="sm" src="" alt="6" />
        <img class="sm" src="" alt="7" />
        <img class="lg" src="" alt="8" />
        <img class="sm" src="" alt="9" />
        <img class="sm" src="" alt="10" />
    </div>
</div>

<div class="wrap">
  <img class="lg" src="" alt="1" />
  <img class="sm" src="" alt="2" />
  <img class="sm" src="" alt="3" />
  <img class="sm" src="" alt="4" />
  <img class="sm" src="" alt="5" />
  <img class="lg2" src="" alt="6" />
  <img class="sm" src="" alt="7" />
  <img class="sm" src="" alt="8" />
  <img class="sm" src="" alt="9" />
  <img class="sm" src="" alt="10" />
  <img class="lg" src="" alt="11" />
  <img class="sm" src="" alt="12" />
  <img class="sm" src="" alt="13" />
  <img class="sm" src="" alt="14" />
  <img class="sm" src="" alt="15" />
  <img class="lg2" src="" alt="16" />
  <img class="sm" src="" alt="17" />
  <img class="sm" src="" alt="18" />
  <img class="sm" src="" alt="19" />
  <img class="sm" src="" alt="20" />
</div>

无需定义div中的每一行，因为它们将自动适应并环绕

另外，如果您首先在每行（左或右）浮动大图像，那么其他四个图像将在不需要任何javascript的情况下就位

每五个数字将是一个大图像（1、6、11、16、21等）。如果您希望它不使用javascript，那么就使用这个解决方案。如果要保留原始编号系统，请使用上述解决方案。

您可以将其视为网格。更多的标记，但也可重用和响应。例如，您可以使用占用其容器一半的单个类来处理此网格布局

第一行： -1列1/2：有1个大图像 -1列1/2：有4列（每列1/2，每列包含一个小图像）

第二行：只需反转前1/2列即可

列是浮动的，因此列4和列5将堆叠在1和2下。。。你的图像，也必须在正确的纵横比

最后，因为您是浮动元素，所以clearfix组

希望能有帮助

包装器的Micro clearfix*/ .wrap:之前， .wrap:在{ 内容：''；显示：表格 } .wrap:在{ 明确：两者皆有； } .wrap{width:650px；} /*如果放置正确的图像，则不需要大小*/ img{ 宽度：100%；高度：自动；垂直对齐：中间；/*删除图像的间隙*/ } /*您可以进一步创建一些其他列*/ .col-1-2{ 浮动：左；宽度：50%； } /*仅用于演示目的*/ img{ 宽度：100%；高度：100px； } img.lg{高度：200px；}

您可以将其视为一个网格。更多的标记，但也可重用和响应。例如，您可以使用占用其容器一半的单个类来处理此网格布局

第一行： -1列1/2：有1个大图像 -1列1/2：有4列（每列1/2，每列包含一个小图像）

第二行：只需反转前1/2列即可

列是浮动的，因此列4和列5将堆叠在1和2下。。。你的图像，也必须在正确的纵横比

最后，因为您是浮动元素，所以clearfix组

希望能有帮助

您的描述很难理解。你能展示一张你已经发布的图片吗