Question

前4张图片尺寸相同，我需要在页面上均匀排列。我怎么能用HML5和CSS做到这一点？

<block>
    <img id="bedroom" src="photos/bedroom1.jpg" alt="bedroom furniture">
    <img id="dining" src="photos/dining.jpg" alt="dining furniture" >
    <img id="lounge" src="photos/lounge.jpg" alt="lounge furniture">
    <img id="office" src="photos/office.jpg" alt="office furniture">
</block>
    <img id="lounge2" src="photos/lounge2.jpg" alt="large loungeroom funiture">
    <img id="mixed" src="photos/mixed.jpg" alt="A mix of furniture">

CSS：

#logo  {position: relative; margin-left:650px; }
nav {background-color: red; border-color: black; border-style:ridge; 
    position: relative; max-width: 100%; text-align: center; padding: 10px;}
nav li {display: inline; }  
nav a {color:black; padding: 10px 50px 10px 50px;} 
nav a:visited {color:blue;}
nav a:hover {color: green;}
block { position:absolute; padding: 10px 50px 10px 50px; width: 100%; }

Answer 1

#genericClass {
  float:left;
}

我应该把它们全部排好。我相信。

Answer 2

欢迎来到Stack Overflow！现在首先，你的代码有点令人困惑，并没有太多意义。例如，您的CSS部分与您的HTML代码无关，（在您的HTML中看不到nav）。

要回答你的问题，你要找的是CSS标签float。

float CSS属性指定应该从中获取元素正常流动并沿其左侧或右侧放置容器，其中文本和内联元素将环绕它。的 https://developer.mozilla.org/en-US/docs/Web/CSS/float

使用float时，您可以使用left或right，，当然还有：none，inital，inherit 。你需要具体的是float: left，这将告诉所有元素在页面左边对齐。

我为你写了一个不错的小 JSFIDDLE ：）

如果您对浮动的工作原理有任何疑问，可以使用谷歌（或者它吧......），或者只是将其作为问题评论发布：）

在页面上排列4张图像

2 个答案: