Question

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

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

有人请有提示以使其正确吗？（即将右侧单元格的内容放在页面顶部？）

我尝试使用 display、float 和 clear 选项，但我无法使其工作。我在 css 表中使用了一个 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 网格布局中定位单元格元素

1 个答案: