时间戳

首页 > 解决方案 > 在 CSS 网格布局中定位单元格元素

html - 在 CSS 网格布局中定位单元格元素

问题描述

我正在尝试使用display:tablecss 选项来创建一个页面，该页面分为类似单元格的块。

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

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

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

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

这是输出：

单元格显示 CSS 输出

标签： htmlcssimagedisplaycss-tables

解决方案

这是您要求的代码：

这里的问题是垂直对齐使内容保持向下。因此，使用以下方法将垂直对齐方式更改为顶部：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>

希望这可以帮助

推荐阅读