html如何让四张图片横着排列

可以使用CSS中的display属性和float属性来实现四张图片横着排列。

HTML代码：

<div class="image-row">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
</div>

CSS代码：

.image-row {
  display: block;
  overflow: hidden;
}

.image-row img {
  float: left;
  width: 25%;
  height: auto;
}

解释：

1. 将四张图片放在一个div容器中，方便样式设置。

2. 设置div容器的display属性为block，使其成为块级元素，并设置overflow属性为hidden，以防止图片溢出。

3. 设置每张图片的float属性为left，使其向左浮动。

4. 设置每张图片的宽度为25%，即四张图片总宽度为100%。

5. 设置每张图片的高度为auto，保持图片比例不变。

相关问题

html怎么让图片横着排

可以使用CSS中的display属性和float属性来实现让图片横着排列。具体步骤如下：

1. 在HTML中，将图片放在一个div标签中。

2. 在CSS中，设置这个div的display属性为inline-block，这样可以让多个div并排显示。

3. 对每个div设置float属性为left，这样图片就会横向排列。

下面是一个示例代码：

HTML代码：

<div class="image-container">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

CSS代码：

.image-container {
  display: inline-block;
}

.image-container img {
  float: left;
}

这样就可以让图片横向排列了。

让三个div横着排列

可以使用CSS的flex布局来实现三个div横着排列。代码如下：

HTML:

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS:

.container {
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin-right: 10px; /* 可以设置间距 */
}

.box:last-child {
  margin-right: 0; /* 最后一个box不设置右侧间距 */
}

以上代码将会在容器中横向排列三个宽高为100px的盒子，盒子之间的间距为10px。