如何将图像放入与CSS网格？ [英] How to put images into a grid with css?

问题描述

我正在尝试创建一个网格类型的图像样式，并在下面有一个框。有没有更简单的方法来实现这种外观？
我正在尝试复制此图片中显示的布局

目前我正在定位：
我现在拥有的屏幕截图

我希望最右边的图像位于右边缘，并且还有一点图像间距。

到目前为止我的HTML：

 < ; section id =趋势> 
 
< h>趋势评论< / h> 
 
< div class =review1> 
< a href =＃>< img src =images / ramenzundo.jpgalt =ramenzundowidth =300height =300/>< / a> 
< a href =＃>< img src =images / charlierabbit.jpgalt =charliewidth =300height =300/>< / a> 
< a href =＃>< img src =images / ichiran.jpgalt =ichiranwidth =300height =300/>< / a> 
< / div> 
 
 
< div class =below1> 
< p> RAMEN ZUNDO< / p> 
< / div> 
 
 
< div class =reviews4> 
< a href =＃>< img src =images / downandout.jpgalt =downwidth =300height =300/>< / a> 
< a href =＃>< img src =images / speedos.jpgalt =speedowidth =300height =300/>< / a> 
< a href =＃>< img src =images / tinygiant.jpgalt =tinywidth =300height =300/>< / a> 
< / div> 
 
< / section> 
  

我的CSS：

  #trending {
 float：left; 
 width：960px; 
 height：1000px; 
背景颜色：＃fdded9; 
} 
 
 
 #trending h {
 position：absolute; 
 font-size：30px; 
 font-family：'Economica'，sans-serif; 
颜色：白色; 
背景颜色：黑色; 
} 
 
 .review1 {
 padding-top：50px; 
 margin-right：30px; 
} 
 
 .below1 {
 vertical-align：bottom; 
 width：300px; 
 height：200px; 
背景颜色：黑色; 
 
  

解决方案

HTML和CSS - 知道这仍然是最难做的事情之一。这个问题也不是真的关于图像。做一个'网格'元素布局就是你在做什么。图像是和元素 - 就像div一样 - 但在这种情况下 - 您的元素在父元素中。

确保您的标记为第一步：

 < ul class ='thing-list'> 
 
< li class ='thing'> 
< a class ='link'href ='＃'> 
< figure> 
< img src ='https：//placehold.it/800x1000'alt ='东西海报'> 
< / figure> 
< h1 class ='title'>标题< / h1> 
< div class ='rating'> 
 xxx 
< / div> 
< / a> 
< / li> 
 
< / ul> 
  

这将存在于某些布局管理的父元素中。

网格几乎总是由一组数据吐出的东西的列表，因此您应该实际使用一个列表 - 可能甚至是有序列表。 < ol>

一旦你有可靠的标记 - 你有很多选择如何获得网格。大部分你选择的将取决于你必须支持哪些浏览器。

使用类似这样的网站： https://caniuse.com/#search=grid 检查浏览器兼容性的任何CSS的东西。

<你可以使列表项目显示：inline-block; ，它们将排队并分解到下一行。您可以使用表格布局（将信息放入表格元素中）

您可以使用浮动对齐，然后对齐（确保clearfix的父 - 或短期内 overflow：hidden; 它）

您可以使用CSS网格（查看该网格）

，这是我的建议。唯一的缺点是，您可能需要使用预处理器和autoprefixer来确保您不必手动编写棘手的浏览器前缀。 （这并不是真正的缺点 - 但是如果你没有使用过，可能会感到害怕）。我建议初学者使用codekit，或者使用内置于codepen中的autoprefixer来练习。

li>

我强烈建议您尝试我提到的所有方法 - 这样您就可以了解每种方法的特点。

示例： https://jsfiddle.net/sheriffderek/0egLgmge/

这是一个很好的指南，可帮助您了解具体情况： https://css-tricks.com/snippets/css/a-guide-to-flexbox

  ul {
 list-style：none; 
保证金：0; 
 padding：0; 
} 
 
图{
 margin：0; 
 
 
图img {/ *让img的数字响应父母* / 
 display：block; 
宽度：100％; 
 height：auto; 
} 
 
。something-list {
 display：flex; 
 flex-direct：row; 
 flex-wrap：wrap; 
 justify-content：space-between; 
} 
 
。事物清单。事物{
弹性基础：30％; 
 background：rgba（0,0,0，.1）; 
 margin-bottom：30px; 
} 
 
。something-list .thing .link {
 display：block; / *这有孩子是块 - 所以它必须阻止* / 
} 
 
。something-list。something figure {
 / * * / 
 } 
 
。thing-list .thing .title {
 margin：0; 
 padding：10px; 
 font-size：16px; 
背景：lightgreen; 
颜色：白色; 
} 
 
。something-list .thing .rating {
 padding：10px; / *您也可以为这些星星使用flexbox * / 
} 
  

对于不同的屏幕尺寸 - 您需要使用@media查询来根据屏幕大小更改样式规则。

您还需要： https://www.paulirish.com/2012/box-sizing-border-box-ftw /

I am trying to create a grid sort of style of images and having a box underneath. Is there an easier way to achieve this look? I am trying to replicate the layout shown in this image

At the moment this is where I am at with positioning: Screenshot of what I have now

I want the far right image to be at the right margin, and also have a bit of spacing between the images.

My HTML so far:

      <section id="trending">

       <h> TRENDING REVIEWS </h>

       <div class="review1">
          <a href="#"><img src="images/ramenzundo.jpg"  alt="ramenzundo" width="300" height="300" /></a>
         <a href="#"><img src="images/charlierabbit.jpg" alt="charlie" width="300" height="300" /></a>
         <a href="#"><img src="images/ichiran.jpg" alt="ichiran" width="300" height="300" /></a>
      </div>


   <div class="below1">
       <p>RAMEN ZUNDO</p>
   </div>


   <div class="reviews4">
       <a href="#"><img src="images/downandout.jpg" alt="down" width="300" height="300" /></a>
       <a href="#"><img src="images/speedos.jpg" alt="speedo" width="300" height="300" /></a>
       <a href="#"><img src="images/tinygiant.jpg" alt="tiny" width="300" height="300" /></a>
   </div>

     </section>

My CSS:

  #trending {
      float:left;
      width:960px;
      height:1000px;
      background-color:#fdded9;
  }


  #trending h{
      position:absolute;
      font-size: 30px;
      font-family: 'Economica', sans-serif;
      color:white;
      background-color: black;
  }

  .review1 {
     padding-top:50px;
     margin-right: 30px;
  }

 .below1{
    vertical-align:bottom;
    width:300px;
    height:200px;
    background-color:black;
  }

解决方案

Given that you are new to HTML and CSS - know that this is still one of the hardest things to do well. The question isn't really about images either. Making a 'grid' layout of elements is what you are doing. An image is and element - just like a div - but in this case - your elements are inside a parent.

Ensuring your markup is as great as it can be, is the first step:

<ul class='thing-list'>

  <li class='thing'>
    <a class='link' href='#'>
      <figure>
        <img src='https://placehold.it/800x1000' alt='thing poster'>
      </figure>
      <h1 class='title'>Title</h1>
      <div class='rating'>
        xxx
      </div>
    </a>
  </li>

</ul>

This would live in some parent element for layout management.

Grids are almost always a list of something being spit out by an array of data, so you should actually use a list - maybe even an 'ordered' one. <ol>

Once you have solid markup - you have many choices of how to get a grid going. Most of what you choose will depend on what browsers you have to support.

Use a site like this: https://caniuse.com/#search=grid to check for browser compatibility for any CSS stuff.

• You can make the list items display: inline-block; and they will lineup and break to the next line.

• You could use a table layout (put the info into a table element)

• You can use floats to align then next to each other (make sure to clearfix their parent - or overflow: hidden; it in the short term)

• You can use CSS grid (look that up)

• Or you can use flexbox, which is what I suggest. The only downside to this, is that you'll likely want to use a preprocessor and autoprefixer to ensure you don't have to write the tricky browser prefixes by hand. (this is not really a downside - but might be scary if you haven't used one.) I suggest codekit for beginners - or use the autoprefixer built into codepen for practice.

I HIGHLY recommend you try ALL the ways I mentioned - so you can learn the quirks of each.

Example: https://jsfiddle.net/sheriffderek/0egLgmge/

This is a great guide to help you with the specifics: https://css-tricks.com/snippets/css/a-guide-to-flexbox

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

figure {
  margin: 0;
}

figure img { /* make img's in figures responsive to their parent */
  display: block;
  width: 100%;
  height: auto;
}

.thing-list {
  display: flex;
  flex-direct: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.thing-list .thing {
  flex-basis: 30%;
  background: rgba(0,0,0,.1);
  margin-bottom: 30px;
}

.thing-list .thing .link {
  display: block; /* this has children that are block - so it HAS to be block */
}  

.thing-list .thing figure {
  /* */
}

.thing-list .thing .title {
  margin: 0;
  padding: 10px;
  font-size: 16px;
  background: lightgreen;
  color: white;
}

.thing-list .thing .rating {
  padding: 10px; /* you can use flexbox for these stars too */
}

For different screen sizes - you'll need to use @media queries to change the style rules based on screen size.

You're also going to need this: https://www.paulirish.com/2012/box-sizing-border-box-ftw/

这篇关于如何将图像放入与CSS网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！