根据屏幕大小在CSS中安排元素

我想知道如何在我的CSS中排列元素的位置，如顶部，左侧，对齐等等？看看我的代码根据屏幕大小在CSS中安排元素

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

我的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 
}

的横幅suposed是在中间的中心，以及约1/4应或它的左上角（上左下横幅）。如何根据用户屏幕设置顶部，左侧和侧面的大小？这里

我的问题是，当我在我的工作空间（我的其他的房子），他们都很好地对准，但是当我去我的笔记本电脑继续我的工作，他们的定位改变。（我的笔记本电脑有一个小屏幕）

来源

2012-02-01 user962206

您可以使用@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; 
    } 
}

来源

2012-02-01 14:08:53 iblazevic

我给你那里是更先进一点，我用它当我改变了我的网页的样子，取决于它是否在浏览器或手机，iPad的开上了答案等等 – iblazevic 2012-02-01 19:12:50

您是否尝试过加入

position: relative;

您的#container声明？这会将所有绝对定位的子元素放置在#container标记中。

第二次运行：

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 
}

来源

2012-02-01 14:16:15

位置相对是做什么的？我应该编辑我的容器标签的宽度吗？ – user962206 2012-02-01 14:22:15

我在我的回复中编辑了一些CSS。这将根据屏幕大小更改布局。请注意最小宽度和最小高度声明。布局应该是什么样子？ – 2012-02-01 15:01:24

你给我的那个几乎是正确的，横幅需要集中，这就是它了，请问。你是怎么做到的？你是怎么做到的？无论用户的屏幕尺寸大小如何，它仍然与之前的格式相同？我正在慢慢采取这一点 – user962206 2012-02-01 16:11:42

根据屏幕大小在CSS中安排元素

回答

相关问题