Позиционирование элементов CSS для всех разрешений

Я ищу для создания сайта и использования позиционирования CSS сейчас. Но для каждой резолюции он помещает в разные позиции из границ из-за свойства поля. Но как я могу разместить его на одинаковом расстоянии для всех разрешений экрана?Позиционирование элементов 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>

Я могу понять, что он помещает по-разному для разных разрешений от границы из-за разницы расстояний, но как сделать это на равном расстояние для все разрешения экрана?

источник

2015-09-07 Kaushik S

Не могли бы вы использовать% вместо px.

источник

2015-09-07 12:42:55 ProblemSolver

Вы должны выбрать, хотите ли вы отладочный макет или фиксированный. Если вы хотите фиксированный макет, ваш основной контейнер должен иметь фиксированную ширину в px, а элементы внутри должны быть также в px.

Если вам нужен отзывчивый макет, вы должны использовать относительные единицы (в основном em/rem и%) и медиа-запросы, чтобы изменить макет на контрольных точках certains.

Ссылки:

Media queries

CSS units

источник

2015-09-07 12:57:45

Позиционирование элементов CSS для всех разрешений

ответ

Смежные вопросы