Question

我正在寻找建立一个网站并立即使用CSS定位。但是对于每个分辨率，由于边缘属性，它将边界放置在不同的位置。但是，我怎样才能将所有屏幕分辨率均等间隔？

<!DOCTYPE html>
<html>
<head>
    <title>Demo Page</title>

    <style type="text/css">
    #homeHeader{
        text-align: center;
        font-family: Verdana;
    }
    #homeTabs{
        border: 1px solid black;
        height: 800px;
        width: inherit;
    }
    #tabOne{
        margin:50px 50px 20px 100px;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabTwo{
        margin: 0px 50px 20px 250px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabThree{
        margin: 0px 50px 20px 400px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabFour{
        margin: 0px 50px 20px 550px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabFive{
        margin: 0px 50px 20px 700px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabSix{
        margin: 0px 50px 20px 850px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabSeven{
        margin: 0px 50px 20px 1000px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }s
    center{
        font-family: verdana;
    }
    </style>


</head>
<body>

<div id="homeHeader">

    <h1 id="headerH1">HOMELESS MONKEYS</h1>
</div>

<div id="homeTabs">

<div id="tabOne">
    <center><br>Fashion1</center>
</div>

<div id="tabTwo">
    <center><br>Fashion2</center>
</div>
<div id="tabThree">
    <center><br>Fashion3</center>
</div>
<div id="tabFour">
    <center><br>Fashion4</center>
</div>
<div id="tabFive">
    <center><br>Fashion5</center>
</div>
<div id="tabSix">
    <center><br>Fashion6</center>
</div>
<div id="tabSeven">
    <center><br>Fashion7</center>
</div>
</div>

</body>
</html>

我可以理解，由于边距的不同，它会对边框的不同分辨率进行不同的放置，但如何使其在所有屏幕分辨率上均匀分布？

Answer 1

您可以尝试使用％而不是px。

Answer 2

如果您想要响应式布局或固定布局，则必须选择。如果你想要一个固定的布局，你的主容器应该有一个固定的宽度px，里面的元素也必须是px。

如果您需要响应式布局，则应使用相对单位（主要是em / rem和％）和媒体查询来更改某些断点处的布局。

链接：

Media queries

CSS units

所有分辨率的CSS元素定位

2 个答案: