Início / coding / 问题

Perguntas[html](coding)

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

Estou trabalhando em uma seção de depoimentos que tem uma estrutura como esta:

<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>

há mais linhas e colunas dentro de cada coluna (cartão de depoimento) para fins de layout

O problema é que quando tento adicionar uma lacuna na "linha do cartão de depoimento", o cartão de depoimento empilharia em 1 coluna em vez de 2 (o que deveria ser), mesmo que a lacuna seja a menor

  • primeiro tentei usar row-cols-2 e não funciona
  • segundo tentei diminuir o tamanho dos dois cartões adicionando: w-50 e col-6 (e inferior) e ainda não funciona
  • o último passo é tentar remover a classe "container" que contém a linha e a coluna (cartões) e, novamente, ainda não funciona

Como deve ser:

Como deve ser:

O resultado:

O resultado

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

Neste seis e primeiro, ambos pegando 2, rowspanainda seis está pegando apenas uma linha e sete também pegando apenas uma linha, apesar de eu ter escrito rowspan2, devido a isso, primeiro e seis são diferentes porque o primeiro está funcionando bem, enquanto o seis não.

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

Gostaria de entender por que a div verde com borda ciano se comporta dessa maneira nesses casos.

Sem embalagem extra:

.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>

Resultado: a div verde tem altura zero em vez da altura da azul.

Com invólucro extra. Ambos com display flex:

.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>

Resultado: a div verde tem a altura da azul, como esperado.

Com invólucro extra. Apenas o avô com display flex:

.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>

Resultado: a div verde tem altura azul + vermelha + (borda ciano * 2), como esperado.

Por que preciso adicionar um wrapper com display flex para que a porcentagem de altura funcione da maneira que espero?

EDITAR

Fazendo alguns ajustes, descobri algo. No primeiro exemplo, remover height: 100%(ou definir como auto) faz com que ele cresça. Por que é que quando o div verde tem altura auto ele pega toda a altura do pai (menos sua própria borda), mas não quando é definido como 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

Eu tenho um objeto com objeto aninhado. Estou tentando exibir em html usando a diretiva ngFor do Angular. Mas obtive o resultado como várias vezes. Abaixo do meu objeto

 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
    }

];

O código 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>

O resultado que obtive foi insira a descrição da imagem aqui

Por favor me ajude a exibir corretamente

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

Olá e boa tarde a todos que estão lendo isso. Para contextualizar um pouco, estou fazendo meu portfólio e prefiro backend em vez de frontend, então não sou muito bom em CSS e HTML.

Sei que não devemos aplicar imagens, mas mostrar uma imagem é a melhor maneira de mostrar o resultado esperado que desejo.

O que você vê em escuro ao redor da tabela é meu elemento .frame, o elemento que eu quero que ocupe toda a área verde. Eu tentei fazer a largura e altura = 100%, mas ainda não ocupa o espaço desejado

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>

Portfólio

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>

Quero ter um pequeno retângulo vermelho no canto superior direito da minha célula amarela.

Estou pensando em colocar um rect() dentro do meu atributo de estilo para o plano de fundo, mas não tenho certeza.

Meu objetivo:

insira a descrição da imagem aqui

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

Então, estou tendo problemas ao tentar trocar as divs 1 e 2 no celular.

No celular, a ordem deve ser as divs 1, 2 e 3 empilhadas nessa ordem.

Então, acima de 768px, a ordem precisa ser div 2 à esquerda definida em 30% de largura. Então, à direita, divs 1 e 3 precisam ser empilhadas, ocupando o restante à direita.

Não tenho certeza de como posso fazer isso. Eu tentei sem o wrapper, mas não consegui fazer funcionar, isso é o mais próximo que consegui.

Alguém pode me ajudar, por favor?

.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

Tenho um bloco que consiste em uma imagem com texto em volta dela:

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

H H H

Onde *representa a imagem, Trepresenta o texto e Hé um cabeçalho que segue o bloco de texto/imagem.

Preciso de regras CSS que satisfaçam ambas as condições:

  1. O texto deve flutuar ao redor da imagem, enquanto a imagem em si tem preenchimento direito e inferior para evitar que o texto fique grudado nela.
  2. O bloco de texto/imagem não deve ter margem inferior ou preenchimento extra, ou pelo menos ter um que possa ser recolhido, para que o espaçamento entre H e o bloco de texto/imagem seja controlado somente pela margem superior de H.
  3. Isso funciona bem quando há texto suficiente para exceder a altura da imagem. No entanto, não consigo resolver o problema quando não há texto suficiente:
* * * T T T
* * * T T T
* * * T T T
* * *  
* * *  
    
H H H

Nesse caso, a margem da imagem não é recolhida e, em vez disso, é adicionada à margem superior de H, o que cria espaço extra indesejado.

Como posso alcançar o comportamento desejado?

Aqui está um exemplo que demonstra o problema:

.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

Eu tenho um elemento pai com altura definida (por exemplo, 100vh) e display: flex; flex-direction: column, e vários elementos filhos aninhados que não têm altura fixa - sua altura é baseada flex-grow: 1em vez disso. Se eu adicionar um novo elemento mais interno com uma altura maior que seu pai, então a altura de todos os seus ancestrais é alterada. Eu quero que o novo elemento transborde seu pai em vez de alterar sua altura.

Aqui está o link do jsfiddle: https://jsfiddle.net/1o8khw7z/1/

A única maneira de fazer isso funcionar é adicionar overflow: autotodos os elementos que estão entre o pai superior e o novo elemento (verifique os comentários CSS no jsfiddle).

Tenha em mente que não posso usar

Se houver muitos elementos aninhados, essa solução parece um pouco trabalhosa. Existe uma maneira melhor de lidar com isso?

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

Estou usando bootstrap-tablee dynamicallyadicionando meus dados na tabela (incluindo cabeçalhos)

Verifiquei abaixo e outras postagens relacionadas, mas não tive sorte.:

como-implementar-cabeçalho-fixo-para-tabela-no-bootstrap

E eu testei a extensão sticky-header do bootstrap-table, que funciona quando estou rolando o documento inteiro, mas quando quero que minha tabela fique dentro de um contêiner div, ela não funciona mais.

Meu Codepen: exemplo

Nota: Coloquei dados para exemplos, mas na realidade estou usando ajax para chamar todos os dados e, depois, inicializar a tabela, e é por isso que não escrevo nada dentro da tabela no HTML, e preciso que continue assim.

Mas depois do init, o cabeçalho não fica mais preso.

Sou novo no Stackoverflow, então não tenho certeza se estou fazendo isso direito. Não consegui fazer um fiddle, mas aqui está meu código. Obrigado desde já.

$(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>

Trabalho atual (cabeçalho não fixo):

insira a descrição da imagem aqui

Resultado desejado (cabeçalho fixo dentro da tabela):

insira a descrição da imagem aqui

html