css布局的问题 - 网页设计(Homepage)版 - 北大未名BBS
返回本版
1
/ 1
跳转

css布局的问题

[复制链接]
楼主

linlin [离线]

林林

3.3中级站友

发帖数:397 原创分:0
<ASCIIArt> 1楼

1楼贴的代码,2楼描述问题。


<!doctype html>

<html lang="en">

<head>

        <title>Document</title>

<style>

        #main{ width: 100%;} 

        .id1 { 

        background-color: green;

        width: 27.50%;

        height: 100%;

        margin-left: 0%;

        margin-top: 0%;

        position:absolute;

        }


        .id2 { 

        background-color: red;

        width: 45%;

        height: 43.33%;

        margin-left: 27.50%;

        margin-top: 0%;

        position:absolute;

        }


        .id3 { 

        background-color: yellow;

        width: 45%;

        height: 56.67%;

        margin-left: 27.50%;

        margin-top: 24.33%;

        position:absolute;

        }


        .id4 { 

        background-color: blue;

        width: 30%;

        height: 100%;

        margin-left: 72.50%;

        margin-top: 0%;

        position:absolute;

        }



</style>

</head>

<body>

        <div id=main>

                <div class="id1"></div>

                     <table>

                            <tr>

                                 <td>title01</td>

                              </tr>


                              <tr>

                                 <td>title02</td>

                              </tr>

                     </table>

                <div class="id2">区域三</div> 

                <div class="id3">区域四</div>

                <div class="id4">区域五</div>

</body>

</html>


发表于2021-06-05 09:12:15
楼主

linlin [离线]

林林

3.3中级站友

发帖数:397 原创分:0
<ASCIIArt> 2楼

问题一:

上面的代码,我在id1块中插入一个表格,然后网页布局就变了,左边分出来的区域上升了。

如果去掉table位置是对的,请教如何修改?


问题二:

我如何显示table里面的文字,id1设置成绿色的背景,table里面的文字就被遮掉了。

如何既显示绿色和文字,谢谢!

linlin (林林) 在 ta 的帖子中提到:

1楼贴的代码,2楼描述问题。

<!doctype html>

<html lang="en">

……

发表于2021-06-05 09:15:58

CharAznable [在线]

赤い彗星

4.7主序星

发帖数:4986 原创分:5
<ASCIIArt> 3楼

你这个表也没插到.id1里啊。。。


用absolute position这种hard code方式做大布局很容易坏的,建议学一学flexbox。。。


linlin (林林) 在 ta 的帖子中提到:

问题一:

上面的代码,我在id1块中插入一个表格,然后网页布局就变了,左边分出来的区域上升了。

如果去掉table位置是对的,请教如何修改?

……


签名档

モビルスーツの性能の違いが、戦力の決定的差でないということを教えてやる

发表于2021-06-05 09:41:56
楼主

linlin [离线]

林林

3.3中级站友

发帖数:397 原创分:0
<ASCIIArt> 4楼

现在中间的div上下各为50%,为什么显示不对啊?


<!doctype html>

<html lang="en">


<head>

        <title>Document</title>

<style>


        #main{ width: 100%;

               height: 100%;

               } 


        .id1 { 

        background-color: green;

        width: 30%;

        height: 100%;

        margin-left: 0%;

        margin-top: 0%;

        position:absolute;

        }


        .id2 { 

        background-color: red;

        width: 30%;

        height: 50%;

        margin-left: 30%;

        margin-top: 0%;

        position:absolute;

        }


        .id3 { 

        background-color: yellow;

        width: 30%;

        height: 50%;

        margin-left: 30%;

        margin-top: 50%;

        position:absolute;

        }


        .id4 { 

        background-color: blue;

        width: 30%;

        height: 100%;

        margin-left: 60%;

        margin-top: 0%;

        position:absolute;

        }

</style>

</head>


<body>

        <div id=main>

                <div class="id1">区域一</div>

                <div class="id2">区域三</div> 

                <div class="id3">区域四</div>

                <div class="id4">区域五</div>

        </div>

</body>

</html>


CharAznable (赤い彗星) 在 ta 的帖子中提到:

你这个表也没插到.id1里啊。。。


用absolute position这种hard code方式做大布局很容易坏的,建议学一学flexbox。。。


发表于2021-06-05 19:34:35

CharAznable [在线]

赤い彗星

4.7主序星

发帖数:4986 原创分:5
<ASCIIArt> 5楼

因为margin 跟padding的百分比是相对parent的width的,不是height

absolute position的位置一般靠left/right,top/bottom控制,百分比是相对width和height的


linlin (林林) 在 ta 的帖子中提到:

现在中间的div上下各为50%,为什么显示不对啊?

<!doctype html>

<html lang="en">

……


签名档

モビルスーツの性能の違いが、戦力の決定的差でないということを教えてやる

发表于2021-06-06 00:06:19
楼主

linlin [离线]

林林

3.3中级站友

发帖数:397 原创分:0
<ASCIIArt> 6楼

        .id3 { 

        background-color: yellow;

        width: 30%;

        height: 50%;

        margin-left: 30%;

        margin-top: 50%;      ===> 这里正确的应该怎么填写啊?

        position:absolute;

        }


我现在尝试下来,这里应该的值大致是26.33%,就对了。

但是我不知道这个值是如何换算出来的?



CharAznable (赤い彗星) 在 ta 的帖子中提到:

因为margin 跟padding的百分比是相对parent的width的,不是height

absolute position的位置一般靠left/right,top/bottom控制,百分比是相对width和height的

 最后修改于2021-06-06 19:00:57
  • 发表于2021-06-06 18:55:11

CharAznable [在线]

赤い彗星

4.7主序星

发帖数:4986 原创分:5
<ASCIIArt> 7楼

我不是说了么,这个是根据parent dom的width算的,你窗口尺寸动一下就坏了,不要这么写。。。。

linlin (林林) 在 ta 的帖子中提到:

.id3 { 

background-color: yellow;

width: 30%;

……


签名档

モビルスーツの性能の違いが、戦力の決定的差でないということを教えてやる

发表于2021-06-07 05:10:03

toip [离线]

iTop

4.7剑侠

发帖数:5234 原创分:1
<ASCIIArt> 8楼

建议使用框架吧。

那么多成熟框架用起来多方便

linlin (林林) 在 ta 的帖子中提到:

1楼贴的代码,2楼描述问题。

<!doctype html>

<html lang="en">

……

签名档

红尘来啊来,去也去,都是一场空

发表于2021-06-27 18:37:03
返回本版
1
/ 1
跳转

请您先 登录 再进行发帖

快速回复楼主
标题
建议:≤ 24个字
签名档
发布(Ctrl+回车)

您输入的密码有误,请重新输入