Question

我想知道如何在我的CSS中排列我的元素的位置，如top，left，align等等？看看我的代码

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

横幅位于中间位置，约为1/4或左上角（横幅下方左上方）。如何根据用户屏幕设置顶部，左侧，侧面的大小？

我的问题是，当我在我的工作区（我的另一所房子）时，他们已经很好地对齐，但当我去我的笔记本电脑继续工作时，他们的校准发生了变化。（我的笔记本电脑屏幕较小）

Answer 1

您可以使用@media屏幕，然后只需更改css，如果屏幕尺寸不同这是一个例子（如果屏幕低于700px，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

您是否尝试过添加

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
}

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

2 个答案: