帶有css的html表-我無法更改行中元素之間的間距-有解無憂

我正在使用 html 和 css 創建我的第一個基本網站，它只是一個簡單的自定義鏈接樹型別網站，我的社交將被布置在螢屏上。我正在嘗試創建 2 列 3 行。行中的每個元素都彼此相距超遠，我不知道如何解決這個問題。

HTML 代碼：

<body class="body">
    <div class="container">
        <table>
            <tr class="row-1">
                <td><img src="images/twitch-popout.png"></td>
                <td><img src="images/youtube-popout.png"></td>
            <tr class="row-2">
                <!--<td ><img src="images/tiktok-popout.png"></td>
                <td ><img src="images/twitter-popout.png"></td> -->
            <!--<tr >
                <td ><img src="images/instagram-popout.png"></td>
                <td ><img src="images/discord-popout.png"></td>
            </tr> -->
        </table>
    </div>
</body>

CSS 檔案：

*{
    margin: 0;
    padding: 0;
}

body {
    background: url("images/background.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.container{
    display: block;
    height: 91%;
    border: 3px solid red;
    position: relative;
}

.container td{
    margin: 0;
}

.container img{
    width: 40%;
}

.row-1{
    position: absolute;
    align-items: center;
}

我嘗試了很多不同的事情，但我沒有做任何作業

編輯：我附上一張圖片來展示它的樣子帶有css的html表 - 我無法更改行中元素之間的間距

uj5u.com熱心網友回復：

根據我的評論，這是一種使用 CSS 網格創建具有 2 列的網格的方法。

.container {
  border: 3px solid red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.container img {
  width: 100%;
  height: 80px;
}

<div class="container">
  <img src="images/twitch-popout.png">
  <img src="images/twitch-popout.png">
  <img src="images/twitch-popout.png">
  <img src="images/twitch-popout.png">
  <img src="images/twitch-popout.png">
  <img src="images/twitch-popout.png">
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/512272.html

標籤：htmlcssCSS 表

上一篇：當兩者都在CSS的相同位置時如何隱藏一個文本并顯示另一個

下一篇：試圖使多個導航鏈接從左到右移動，每個鏈接都有延遲，有人可以解釋為什么這個代碼片段不起作用嗎？