根据屏幕尺寸在CSS中排列元素

Question

I was wondering how would I Arrange the postion of my elements in my CSS like top,left, align, and so on and so forth? 我想知道如何在CSS中排列元素的位置，例如top，left，align等，以此类推？ take a look at my code 看一下我的代码

<!DOCTYPE html>

<html>

    <head>
        <title>Avril Lavigne</title>
        <link rel = "stylesheet" type = "text/css" href="style/style.css"

    </head>

    <body>

        <div id = "container">

        <div id="banner"><img src = "images/banner.jpg"/></div>

        <div id = "content">

        <div id = "about">
        <h1>About Avril Lavigne</h1>

        <p>
        Avril Ramona Lavigne is a Canadian singer-songwriter. 
        She was born in Belleville, Ontario, but spent most of her youth in the small 
        town of Napanee. By the age of 15, she had appeared on stage with Shania Twain; by 16, 
        she had signed a two-album recording contract with Arista Records worth more than $2 million.
        In 2002, when she was 17 years old, Lavigne broke onto the music scene with her debut album Let Go.
        </p>
        </div>  

                <div id ="tourdates">
                <h2> Tour dates</h2>
                </div>

        </div>  
        </div>

    </body>

<html>

my CSS 我的CSS

body{
    background-color:#292929;
    font-size:small;
}

#container{
    padding: 420px;
    margin:120px;
    border: 5px dotted pink;
}


#banner{
top: 150px;
left: 450px;
right:450px;
position:absolute;
}

#about{
font-size: 100%;
font-family: tahoma;
color: #8B3A62;
position:absolute;
top:320px;
left: 440px;
padding: 20px;
width:320px;
length: 120px;
margin:10px;
border: dashed 2px white;
}

#tourdates{
color: #8B3A62;
padding: 20px;
top:320px;
right: 540px;
position:absolute;
border: dotted 2px white
}

The banner is suposed to be at the middle center, and the about should 1/4 or the top left of it(top left below the banner). 横幅应位于中间居中，大约应为1/4或它的左上方（横幅下方的左上方）。 How would set the sizes of the top, left,side depending on the users screen? 如何根据用户屏幕设置顶部，左侧和侧面的尺寸？

My Problem here was when I was at my workspace(my other house) they are well aligned, but when I went to my laptop to continue my work their alignment changed.(my laptop has a smaller screen) 我的问题是当我在我的工作区（另一间房子）时，它们对齐良好，但是当我去笔记本电脑继续工作时，它们的对齐方式发生了变化（笔记本电脑的屏幕较小）。

Answer 1

You can use @media screen and then you simply change css if screen size is different Here is an example (couple of things in css changed if screen is under 700px): 您可以使用@media屏幕，然后在屏幕大小不同的情况下简单地更改css。这是一个示例（如果屏幕在700像素以下，css中的几处内容将发生变化）：

@media screen and (max-width: 700px)
 {
  /*.figure
    {
        margin-right: 3.317535545023696682%;   
        width: 41.902053712480252764%; 

    }*/
    #mail
    {
        padding-left:0px;
    }
    body
    {
        font-size:0.8em;
    }
    h5
    {
        font-size:0.9em;
    }
        #my_profile_image
    {
        height:160px;
        width:160px;
    }
}

Answer 2

Have you tried adding 您是否尝试过添加

position: relative;

to your #container declaration? 您的#container声明？ This will position all absolute-positioned child elements within the #container tag. 这会将所有绝对定位的子元素放置在#container标签内。

2nd run: 第二次运行：

body{
    background-color:#292929;
    font-size:small;
}

#container{
    border: 5px dotted pink;

    position: absolute;
    top: 120px;
    left: 120px;
    right: 120px;
    bottom: 120px;
    min-height: 615px;
    min-width: 900px;
}


#banner{
    position: absolute;
    top: 150px;
    left: 30px;
    right: 30px;
}

#about{
    position:absolute;
    top: 320px;
    right: 32%;
    left: 30px;

    font-size: 100%;
    font-family: Tahoma;
    color: #8B3A62;
    padding: 20px;
    border: dashed 2px white;
}

#tourdates{
    position: absolute;
    top: 320px;
    left: 70%;
    right: 30px;

    color: #8B3A62;
    padding: 20px;
    border: dotted 2px white
}

根据屏幕尺寸在CSS中排列元素

问题描述

2 个解决方案

解决方案1
2 已采纳 2012-02-01 14:08:53

解决方案2
1 2012-02-01 14:16:15

根据屏幕尺寸在CSS中排列元素

问题描述

2 个解决方案

解决方案1 2 已采纳 2012-02-01 14:08:53

解决方案2 1 2012-02-01 14:16:15

解决方案1
2 已采纳 2012-02-01 14:08:53

解决方案2
1 2012-02-01 14:16:15