用css将四个图片按表格形式排列

可以使用CSS中的`display:table`和`display:table-cell`属性来实现表格布局。以下是一个示例代码：

HTML代码：

<div class="table">
  <div class="table-row">
    <div class="table-cell"><img src="image1.jpg"></div>
    <div class="table-cell"><img src="image2.jpg"></div>
  </div>
  <div class="table-row">
    <div class="table-cell"><img src="image3.jpg"></div>
    <div class="table-cell"><img src="image4.jpg"></div>
  </div>
</div>

CSS代码：

.table {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
  width: 50%;
  padding: 10px;
  text-align: center;
}

上面的代码将四个图片分成两行两列，并且每个单元格有10像素的内边距，文字居中对齐。您可以根据需要更改单元格的宽度和内边距等属性来调整布局。

相关问题

用html+css+js实现一个表格里面的滑块按钮

下面是一个使用 HTML、CSS 和 JavaScript 实现的表格内的滑块按钮的示例代码：

HTML:

<table>
  <tr>
    <td>滑块按钮:</td>
    <td>
      <div class="slider-container">
        <input type="range" id="slider" min="0" max="100" value="50">
        <div id="slider-value">50</div>
      </div>
    </td>
  </tr>
</table>

CSS:

.slider-container {
  position: relative;
}

#slider {
  width: 200px;
}

#slider-value {
  position: absolute;
  top: -25px;
  left: 210px;
}

JavaScript:

var slider = document.getElementById("slider");
var sliderValue = document.getElementById("slider-value");

slider.oninput = function() {
  sliderValue.innerHTML = this.value;
};

这段代码将创建一个表格，其中包含一个滑块按钮。滑块按钮通过 CSS 进行样式设置，并使用 JavaScript 监听滑块值的变化，并将值显示在页面上。

你可以根据需要进行进一步的样式和功能调整。希望对你有帮助！

css四张图片排列成田字

HTML代码：

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

CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

img {
  width: 30%;
  margin: 10px;
}

img:nth-child(1),
img:nth-child(2),
img:nth-child(3) {
  margin-bottom: 0;
}

img:nth-child(2),
img:nth-child(4) {
  margin-left: 0;
}

img:nth-child(3),
img:nth-child(4) {
  margin-top: 0;
}

解释：

1. 将四张图片放在一个容器内，使用flex布局
2. 设置每张图片的宽度为30%并添加一些间距
3. 使用:nth-child选择器选择要调整的图片，使它们在正确的位置上
4. 第一行的前三张图片不需要下外边距，第二列的后两张图片不需要左外边距，第三行的后两张图片不需要上外边距