在HTML中使用CSS --使用“float”将图像定位在单行中

prdp8dxp 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(173)

在一个网页，我想有三个图像在顶部，都在同一行，间隔，使第一个是所有的方式离开，其他两个是紧挨着对方在页面的中心。下面是我如何可视化代码：

<table>
  <tr>
    <th>
      <img src="https://picsum.photos/100/100" style="float:left;">
      <img src="https://picsum.photos/101/100" style="float:center;">
      <img src="https://picsum.photos/100/101" style="float:center;">
    </th>
  </tr>
</table>

它不像这样工作，我希望有人能告诉我如何使它发生。非常感谢！

css

来源：https://stackoverflow.com/questions/76367517/in-html-with-css-using-float-to-position-images-in-a-single-row

1条答案

按热度按时间

6xfqseft1#

首先，<table>并不是用来创建接口，而是用来创建表格数据。只要使用普通的<div>或任何认为合适的。
此外，float也很好，但在元素定位方面，现代方法通常更受欢迎。
一个可能的解决方案是网格。基本概念的概述可以在here中找到（对于flexbox，则为here）。

#grid {
  /* Create a grid... */
  display: grid;
  /*
    ...with 3 columns, of which
    the two outermost are of equal width.
  */ 
  grid-template-columns: 1fr auto 1fr;
}

.item {
  /* Make the two images in the second column fit nicely. */
  display: flex;
}

/* Demo only */

#grid {
  outline: 1px solid black;
}

<div id="grid">
  <div class="item">
    <img src="https://picsum.photos/100/100">
  </div>
  <div class="item">
    <img src="https://picsum.photos/102/100">
    <img src="https://picsum.photos/101/100">
  </div>
</div>

赞(0）回复(0）举报 2023-06-07

我来回答

在HTML中使用CSS --使用“float”将图像定位在单行中

1条答案

相关问题

热门标签

最新问答