在 css 网格布局中定位单元格元素

Question

我正在尝试使用 display:table css 选项来创建一个分成单元格块的页面。

但是，我希望每个单元格中的内容独立于其他单元格中的内容，即不相对于其他单元格中的元素定位。在这里，当我在第一个单元格中放入图像时，另一个单元格中的内容与图像对齐并且没有到达页面顶部。

请问有人有提示吗？（即将右侧单元格的内容置于页面顶部？）

我尝试使用 display、float 和 clear 选项，但无法正常工作。我在 css table 中使用 table-row 容器，我在其中创建了两个单元格。我还尝试使用列而不是行，但我需要行结构具有相同长度的单元格。这是我的代码：

<!DOCTYPE HTML>

<html lang="en-US">

  <head>
    <meta charset="UTF-8">
  </head>
 
  <body style="color:black">
 
    <div style="display:table">
        
        <div style="display:table-row">
        
            <div style="display:table-cell">
                <img src="./frog.jpg" width="180">
                <p>My image</p>
            </div>
        
            <div style="display:table-cell;float:left">
                <p>Interneciva Claudius pristinae antehac admodum subversa potens interneciva coloniam Caesar quam oppida praeter 
                nimium ut regis exornant civitates et interneciva deduxit vestigia Isaura oppida pristinae pristinae subversa 
                antehac Caesar Isaura Caesar coloniam regis Caesar Claudius regis nimium</p>
            </div>
        </div>
    </div>
  </body>
</html>

这是输出：

cell-display-css-output

Answer 1

这是您要求的代码：

这里的问题是垂直对齐使内容向下。因此，使用以下命令将垂直对齐方式更改为顶部：vertical-align: top;

<html>
<head>
  <meta charset="UTF-8">
</head>

<body style="color:black">

<div style="display:table">
    
    <div style="display:table-row;display:inline-block;">
    
        <div style="display:table-cell;">
            <img src="./frog.jpg" width="180">
            <p>My image</p>
        </div>
    
        <div style="display:table-cell;vertical-align: top;">
            Interneciva Claudius pristinae antehac admodum subversa potens interneciva coloniam Caesar quam oppida praeter 
            nimium ut regis exornant civitates et interneciva deduxit vestigia Isaura oppida pristinae pristinae subversa 
            antehac Caesar Isaura Caesar coloniam regis Caesar Claudius regis nimium
        </div>
    </div>
</div>

希望对您有所帮助

在 css 网格布局中定位单元格元素

Positioning cell elements in css grid layout

html

css

image

css-tables

display