主页 / coding / 问题

问题[html](coding)

Martin Hope
Xyla
Asked: 2025-02-18 15:44:41 +0800 CST
  • 5

我正在制作一个具有如下结构的推荐部分：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="container">
    <div class="row"> (row of the testimonial card)
        <div class="col"> (content/testimonial card)
        <div class="col"> (content/testimonial card)
    </div>
</div>

为了便于布局，每列（推荐卡）内有更多行和列

问题是，当我尝试在“推荐卡行”上添加间隙时，推荐卡会堆叠成 1 列，而不是 2 列（应该是 2 列），即使间隙是最低的

  • 首先我尝试使用 row-cols-2，但它不起作用
  • 其次，我尝试通过添加 w-50 和 col-6 （及更低）来减小两张卡的尺寸，但仍然不起作用
  • 最后一步是我尝试删除包含行和列（卡片）的“容器”类，但仍然不起作用

它看起来应该是这样的：

它看起来应该是这样的：

结果：

结果

html
Martin Hope
p pb
Asked: 2025-02-18 15:27:42 +0800 CST
  • 6

在这个六个和第一个中都取 2，rowspan但六个仍然只占用一行，而七个也只占用一行，尽管我已经写了rowspan2，这是由于第一个和六个不同，因为第一个工作正常而六个则不行。

table { border-collapse: collapse }
td, th { border: solid thin black }
<table>
  <tr>
    <td rowspan="2">first</td>
    <td rowspan="4" colspan="9">second</td>
    <td colspan="3">third</td>
  </tr>
  <tr>
    <td colspan="2">four</td>
    <td>five</td>
  </tr>
  <tr>
    <td rowspan="2">
      six
    </td>
    <td colspan="3" rowspan="2">
      seven
    </td>
  </tr>
</table>

html
Martin Hope
Adrian
Asked: 2025-02-14 22:18:25 +0800 CST
  • 5

我想了解为什么带有青色边框的绿色 div 在这些情况下会有这样的行为。

无额外包装：

.wrapper {
  display: flex;
  border: solid 2px black;
}

.red {
  width: 25px;
  height: 25px;
  background-color: red;
}

.green {
  height: 100%;
  background-color: green;
  border: solid 2px cyan;
}

.blue {
  width: 50px;
  height: 50px;
  background-color: blue;
}
<div class="wrapper">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

结果：绿色 div 的高度为零，而不是蓝色的高度。

带有额外的包装。均带有显示弹性：

.wrapper {
  display: flex;
  border: solid 2px black;
}

.red {
  width: 25px;
  height: 25px;
  background-color: red;
}

.green {
  height: 100%;
  background-color: green;
  border: solid 2px cyan;
}

.blue {
  width: 50px;
  height: 50px;
  background-color: blue;
}
<div class="wrapper">
  <div class="wrapper">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
  </div>
</div>

结果：正如预期的那样，绿色 div 具有蓝色的高度。

带有额外的包装。只有带有显示弹性的祖父级：

.wrapper {
  display: flex;
  border: solid 2px black;
}

.red {
  width: 25px;
  height: 25px;
  background-color: red;
}

.green {
  height: 100%;
  background-color: green;
  border: solid 2px cyan;
}

.blue {
  width: 50px;
  height: 50px;
  background-color: blue;
}
<div class="wrapper">
  <div>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
  </div>
</div>

结果：绿色 div 具有蓝色 + 红色 + （青色边框 * 2）的高度，与预期一致。

为什么我必须添加一个具有显示弹性的包装器才能使高度百分比按照我期望的方式工作？

编辑

经过一番修修补补，我发现了一些东西。在第一个例子中，删除height: 100%（或将其设置为自动）会使其增大。为什么当绿色 div 的高度为自动时，它会占用父级的全部高度（减去其自身的边框），而当设置为 100% 时则不会？

.wrapper {
  display: flex;
  border: solid 2px black;
}

.red {
  width: 25px;
  height: 25px;
  background-color: red;
}

.green {
  height: auto;
  background-color: green;
  border: solid 2px cyan;
}

.blue {
  width: 50px;
  height: 50px;
  background-color: blue;
}
<div class="wrapper">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

html
Martin Hope
Reegan
Asked: 2025-02-14 18:01:36 +0800 CST
  • 6

我有一个带有嵌套对象的对象。我尝试使用 Angular 的 ngFor 指令在 html 中显示。但我得到了多次的结果。在我的对象下面

 productlists = [
    {
      productname: 'orange', price:
        [{ small: 20 }, { medium: 30 }, { large: 40 }], gst: 12
    },
    {
      productname: 'lemon', price:
        [{ small: 40 }, { medium: 80 }, { large: 102 }], gst: 20
    },
    {
      productname: 'apple', price:
        [{ small: 40 }, { medium: 80 }, { large: 102 }], gst: 20
    }

];

html 代码是

<div style="margin-left: 20rem;">
<div *ngFor="let product of productlists" >

    <p style="color: blue;">Product Name {{product.productname}}</p>

    <div *ngFor="let productprice of product.price">
        Product Price
        <p>Small: {{productprice.small}}</p>
        <p>Medium: {{productprice.medium}}</p>
        <p>Large: {{productprice.large}}</p>
    </div>
    <p>Product GST {{product.gst}}</p>

</div>
</div>

我得到的结果是 在此处输入图片描述

请帮我正确显示

html
Martin Hope
Gustavo Da Costa Pereira
Asked: 2025-02-13 22:57:07 +0800 CST
  • 6

大家好，下午好。简单介绍一下背景，我正在制作作品集，我更喜欢后端而不是前端，所以我不太擅长 CSS 和 HTML。

我知道我们不应该应用图像，但展示图像是展示我想要的预期输出的最佳方式。

您在表格周围看到的黑色部分是我的 .frame 元素，我希望该元素占据所有绿色区域。我尝试将宽度和高度设置为 100%，但它仍然没有占据所需的空间

body {
    background-color: rgba(66, 65, 65, 0.192);
    font-family: Arial, sans-serif;
    margin: 0;
}

h1, p {
    color: rgba(0, 0, 0, 0.8);
    text-align: center;
    margin: 20px 0; /* Avoid large margins */
}

p{
    font-size: 30px;

}

.profile-photo {
    display: block;
    margin: 20px auto; /* Center image */
    width: 250px;
    height: 200px;
    border-radius: 20%;
    object-fit: cover;
    position: relative;
    z-index: 2; /* Ensure it's above the square */
}

.square {
    width: 100%;
    height: 175px;
    background-color: rgba(203, 137, 4, 0.619);
    position: relative; 
    margin-top: -150px; 
    z-index: -1;
}

.frame {
    border : black 2px solid; /*added to visualize the size of .frame*/
    flex-grow: 1;
    width: 90%;
    max-width: 100%;
    margin: 0 auto;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 20%;
}

th, td {
    border: 1px solid #273b38; /* This is the border of the table */
    padding: 8px;   
    text-align: left;   
}

th {
    background-color: #55f3f04d;  /* first colum */
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="index.css"> <!-- Linking CSS file -->
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>Hi, I'm Gustavo, a cybersecurity and developmententhusiast learning C and C++!</p>
    <img src="School_ID/TEST_IMAGE.jpg" alt="Profile Photo" class="profile-photo">
    <div class="square"></div>
    <div class="frame">
        <table>
            <thead>
                <tr>
                    <th>Project Name</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Project 1</td>
                    <td>A brief description of Project 1.</td>
                </tr>
                <tr>
                    <td>Project 2</td>
                    <td>A brief description of Project 2.</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

文件夹

html
Martin Hope
chris01
Asked: 2025-02-13 19:33:55 +0800 CST
  • 6

<table style="border: 1px solid black;">
  <tr>
    <td style="width: 200px;">aaaaaa</td>
  </tr>
  <tr>
    <td style="background: yellow;">bbbbbb</td>
  </tr>
  <tr>
    <td>ccc</td>
  </tr>
</table>

我想要黄色单元格右上方有一个小红色矩形。

我想在我的 style-attribute 中放置一个 rect() 作为背景 - 但我不确定。

我的目标：

在此处输入图片描述

html
Martin Hope
pab
Asked: 2025-02-13 06:08:05 +0800 CST
  • 5

因此，我在尝试在移动设备上交换 div 1 和 div 2 时遇到了问题。

移动顺序应为 div 1、2 和 3 按该顺序堆叠。

然后在 768px 以上，需要按照以下顺序将 div 2 放在左侧，设置为 30% 宽度。然后在右侧，需要堆叠 div 1 和 div 3，以占据右侧的剩余部分。

不确定我该怎么做。我试过不用包装器，但没能成功，这是我能做到的最接近的了。

有人能帮帮我吗？

.container {
  display: flex;
  flex-direction: column; 
  gap: 10px;
}


@media (min-width: 768px) {
  .container {
    flex-direction: row; 
  }

  .specs {
    flex: 0 0 30%; 
    order: 1; 
  }

  .content-buttons {
    flex: 0 0 70%; 
    display: flex;
    flex-direction: column; 
    gap: 10px;
    order: 2; 
  }

  .content {
    flex: 1; 
    order: 1;
  }

  .buttons {
    flex: 1; 
    order: 2;
  }
}

/* Borders for visualization */
.content {border: 1px solid red;}
.specs {border: 1px solid green;}
.buttons {border: 1px solid blue;}
<div class="container">
  <div class="specs">2</div>
  <div class="content-buttons">
    <div class="content">1</div>
    <div class="buttons">3</div>
  </div>
</div>

html
Martin Hope
Denis Kulagin
Asked: 2025-02-12 15:03:52 +0800 CST
  • 6

我有一个由图像和环绕文本组成的块：

* * * T T T
* * * T T T
* * * T T T
T T T T T T

H H H

其中*代表图像，T代表文本，H是跟在文本/图像块后面的标题。

我需要满足以下两个条件的 CSS 规则：

  1. 文本应该浮动在图像周围，而图像本身具有右侧和底部填充，以防止文本粘附在其上。
  2. 文本/图像块不应该有额外的底部边距或填充，或者至少有一个可折叠的，以便 H 和文本/图像块之间的间距仅由 H 的顶部边距控制。
  3. 当文本足够多以至于超出图片高度时，这种方法很有效。但是，当文本不够多时，我无法解决这个问题：
* * * T T T
* * * T T T
* * * T T T
* * *  
* * *  
    
H H H

在这种情况下，图像的边距不会折叠，而是添加到 H 的顶部边距，从而产生不必要的额外空间。

我怎样才能实现期望的行为？

以下是一个演示该问题的示例：

.container {
  max-width: 600px;
  margin-bottom: 30px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  display: block;
}

.float-image {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  width: 150px;
  height: auto;
}

.container::after {
  content: "";
  display: block;
  clear: both;
}

.header {
  margin-top: 30px;
}
<div class="container">
  <img src="https://dummyimage.com/150x150/c6ff83/000000" alt="Example Image" class="float-image">
  <p>
    This is an example of an image floated to the left with text wrapping around it.

  </p>
</div>

<h3 class="header">Header</h3>

html
Martin Hope
Marko
Asked: 2025-02-12 08:43:23 +0800 CST
  • 5

我有一个定义高度的父元素（例如 100vh）和display: flex; flex-direction: column，以及几个没有固定高度的嵌套子元素 - 它们的高度基于flex-grow: 1。如果我添加一个新的最内层元素，其高度大于其父元素，则其所有祖先元素的高度都会改变。我希望新元素溢出其父元素，而不是改变其高度。

这是 jsfiddle 链接：https://jsfiddle.net/1o8khw7z/1/

使其工作的唯一方法是添加overflow: auto到顶部父级和新元素之间的所有元素（检查 jsfiddle 中的 CSS 注释）。

请记住我不能使用

如果嵌套元素很多，这个解决方案似乎有点麻烦。有没有更好的方法来处理这个问题？

html
Martin Hope
Kyo
Asked: 2025-02-11 22:40:39 +0800 CST
  • 6

我正在使用bootstrap-table并将dynamically我的数据添加到表中（包括标题）

我检查了下面和其他相关帖子，但没有成功：

如何在 bootstrap 中实现表格的固定标题

我尝试了 bootstrap-table 的 sticky-header 扩展，它在我滚动整个文档时可以工作，但是当我想将表格放在 div 容器内时，它不再起作用了。

我的 Codepen：示例

注意：我放置了数据作为示例，但实际上我使用 ajax 调用所有数据，然后初始化表格，这就是为什么我根本不在 html 中的表格内写任何东西，我需要它保持这种状态。

但在初始化之后，标题不再粘住。

我是 stackoverflow 的新手，所以我不确定我是否做对了，我无法将它变成小提琴，但这是我的代码，提前谢谢。

$(document).ready(function () {
  var columns = [
    {
      field: "name",
      title: "Name"
    },
    {
      field: "age",
      title: "Age"
    },
    {
      field: "city",
      title: "City"
    }
  ];

  var data = [
    { name: "John Doe", age: 28, city: "New York" },
    { name: "Jane Smith", age: 34, city: "Los Angeles" },
    { name: "Jane Smith", age: 34, city: "Los Angeles" },
    { name: "Jane Smith", age: 34, city: "Los Angeles" },
    { name: "Jane Smith", age: 34, city: "Los Angeles" },
    { name: "Mike Johnson", age: 45, city: "Chicago" },
    { name: "Sarah Lee", age: 30, city: "Miami" }
  ];

  // init table
  $("#RealTable").bootstrapTable({
    data: data,
    columns: columns
  });
});
.divA {
  width: 100%;
  max-height: 200px; /* 設定 divA 高度為 50vh */
  overflow: auto; /* 允許內部內容捲動 */
  background-color: #e0e0e0;
  padding: 20px;
  position: relative; /* 需要這個來使 sticky 正常工作 */
}

/* 讓整個 table 設置 sticky */
#RealTable {
  position: relative;
  z-index: 1; /* 確保表格始終顯示 */
  border-collapse: separate; 
  border-spacing:0; 
  text-align:center;
}

.sticky-header th {
  position: sticky !important;
  top: 0;
  background-color: turquoise;
  color: white;
  z-index: 30 !important; /* 確保標題始終位於其他內容上方 */
}
.sticky-header th .th-inner {
  position: sticky !important;
  top: 0;
}

th,
td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
}

.content {
  padding: 0px 0px 50px 0px;
}

.table {
  width: 100%;
  border: 1px solid #ddd;
  text-align: center;
}
<html lang="zh-Hant">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Header with Bootstrap Table</title>

  <!-- 引入 Bootstrap CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

  <!-- 引入 bootstrap-table 的 CSS -->
  <link href="https://unpkg.com/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet">
</head>

<body>
  <div class="section">
    <h1>title</h1>
    <p>qweqwewq</p>
  </div>
  <div class="divA">
    <div class="row table-responsive">
      <table id="RealTable" class="table table-hover text-nowrap">
        <thead class="sticky-header">
        </thead>
        <tbody>
          <!-- dynamic added -->
        </tbody>
      </table>
    </div>
  </div>

  <div class="section">
    <h1>title2</h1>
    <p>qweqwewq</p>
    <p>qweqwewq</p>
    <p>qweqwewq</p>
  </div>

  <!--  jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  <!--  Bootstrap JS -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>

  <!--  bootstrap-table 的 JS -->
  <script src="https://unpkg.com/bootstrap-table/dist/bootstrap-table.min.js"></script>

</body>

</html>

目前的工作（非粘性标题）：

在此处输入图片描述

我想要的结果（表格内的粘性标题）：

在此处输入图片描述

html