小编Ric*_*ich的帖子

CSS/HTML 2x2网格问题

这个问题之前也出现过类似的问题,但是我已经环顾四周,无法找到其他任何人.

我可以在HTML中使用图像制作一个4x4网格div,但是我想要文本中的一个div(右上角).当我进入<p>Some text</p>该div时,它在div下方向左移动,而底部两个仍在对齐并位于移动的文本div下.

我已经尝试将高度固定但没有任何改变,div刚刚向上移动但其他人仍保持原状.

CSS:

/* Page Content */

.container
    {width: 910px;
    height: auto;
    margin: 0px auto;
    padding-top: 35px;
    position: relative;}

/* Home Page Content */

.gridblock, .gridblock2, .gridtext
    {width: 450px;
    height: 200px;
    padding: 0px;
    position: relative;
    display: inline-block;}

.gridblock
    {margin: 2px;}

.gridblock2, .gridtext
    {margin: 3px, 0px, 3px, 0px;}

.gridtext
    {width: 450px;
    height: 200px;
    position: relative;
    background-color: #f9f9f9;}
Run Code Online (Sandbox Code Playgroud)

HTML:

<div class="container">
    <div class="gridblock">
        <img src="images/homegrid1.jpg" alt="3345 Mastering">
    </div>
    <div class="gridtext">
        <p>Some Text</p>    
    </div>
    <div class="gridblock">
        <img src="images/homegrid2.jpg" alt="3345 …
Run Code Online (Sandbox Code Playgroud)

html css grid

5
推荐指数
1
解决办法
2371
查看次数

标签 统计

css ×1

grid ×1

html ×1