Отзывчивый макет с DIV процентами

Я начал работать над новой системой чата на основе PHP для одного из моих проектов, и недавно я много читал о адаптивных макетах, я решил, что например, чтобы избежать использования бутстрапа, даже если он предлагает множество отличных функций, и я чувствую, что есть чему поучиться при работе с нуля, а затем с использованием уже установленного набора кода ... что сказано.Отзывчивый макет с DIV процентами

Вот пример кода, который я собрал, который не ведет себя так, как я ожидал.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Chat Room </title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0l; maximum-scale=1.0; user-scalable=0;" > 

<style type="text/css"> 
#container 
    { 
    position:relative; 
    width:90%; 
    height:600px; 
    margin: 0 auto; 
    border: 1px solid red; 
    } 

#messages 
    { 
    width:75%; 
    margin:5px; 
    padding:10px; 
    height:80%; 
    border: 1px solid blue; 
    float: left; 
    } 

#users 
    { 
    width:21%; 
    margin:5px; 
    padding:10px; 
    height:80%; 
    border: 1px solid green; 
    float: left; 
    } 

#message_entry 
    { 
    width:100%; 
    margin:5px; 
    padding:10px; 
    height:20%; 
    border: 1px solid green; 
    clear: left; 
    }  
</style> 
</head> 
    <body width="device-width"> 

<div id="container"> 
    <div id="messages"> 
     Existing Messages 
    </div> 

    <div id="users"> 
     User List 
    </div> 

    <div id="message_entry"> 
     New Message Box 
    </div>   
</div> 
</body> 
</html>

Я заметил, что проценты, назначенные на внутренние DIV-х, кажется, не относятся к их родительским DIV, как и в случае «message_entry» контейнера.

Любые мысли были бы высоко оценены.

источник

2016-07-20 Eduard Florea

Что это не так, как ожидалось? Вы еще не задали вопрос. – TheValyreanGroup

Хотя похвально хотеть учиться для себя, я бы сказал, что абсолютно необходимо обратиться к документам Bootstrap, чтобы понять их подход, поскольку теперь они, возможно, являются ориентиром для надежного макета. Например, установка '' будет когда-либо создавать проблемы, поскольку вы уже правильно устанавливаете 'device-width' в метатеге. – Toby

вынуть '' у вас есть метатег ' mlegg

#container 
 
    { 
 
    position:relative; 
 
    width:100%; 
 
    height:600px; 
 
    margin: 0 auto; 
 
    border: 1px solid red; 
 
\t float:left; 
 
    box-sizing: border-box; 
 
    } 
 

 
#messages 
 
    { 
 
    width:71% ; 
 
    margin:2%; /* <=== ^^^ 1 horizontal margin (left) of 2% */ 
 
    padding:3%; 
 
    height:75%; 
 
    border: 1px solid blue; 
 
    float: left; 
 
    box-sizing: border-box; /* all the width (padding + borders) and height (padding + borders) whitout the margins */ 
 
    } 
 

 
#users 
 
    { 
 
    width:21% ; 
 
    margin:2%;/* <=== ^^^ 1 horizontal margin of (right)2% */ 
 
    padding:3%; 
 
    height:75%; 
 
    border: 1px solid green; 
 
    float: left; 
 
    box-sizing: border-box; 
 
    } 
 

 
#message_entry 
 
    { 
 
    width:96%; /* 100% - (2% * 2) <=== ^^^ 2 horizontal margins of 2% */ 
 
    margin:2%; /* ■ ■ ■ */ 
 
    padding:3%; 
 
    height:19%; /* 25% - (2% * 3 ) <=== ^^^ 2 vertical + 1 ■ ■ ■ vertical margin */ 
 
    border: 1px solid green; 
 
    float:left; 
 
    box-sizing: border-box; 
 
    }

<body > 
 

 
<div id="container"> 
 
    <div id="messages"> 
 
     Existing Messages 
 
    </div> 
 

 
    <div id="users"> 
 
     User List 
 
    </div> 
 

 
    <div id="message_entry"> 
 
     New Message Box 
 
    </div>   
 
</div> 
 
</body>

Вы должны работать все в процентах и созерцает поле в общих ширинах.

Например: в «сообщениях» общая ширина будет 75%, потому что у нас есть 71% ширины плюс два поля (слева и справа) 2%, ... в «пользователях» общая ширина будет 25%, потому что у нас есть ширина: 21% плюс 2 поля 2% (слева и справа) ... Общая сумма = 100%.

В связи с 'message_entry': Нам нужна та же ширина, что и «пользователи» + «сообщения».

Пользователь имеет два горизонтальных поля (слева и справа) и те же «сообщения»; но единственными, которые влияют на нас, являются «оставленные пользователями» и «правильные» сообщения; «прав пользователей» и «сообщение» не осталось, потому что «message_entry» имеет их тоже. Вот почему «сообщение» имеет ширину 96%.

Та же логика для параметра высоты.

Примечание: используйте поле «размер коробки: рамка», и вас будут беспокоить только поля.

источник

2016-07-20 23:30:43

Спасибо, Омар, предложение относительно расчета ширины было большой частью информации, и это помогло ... Я собираюсь изучить «размер окна: рамка»; а также, когда у меня есть макет, который я ищу, я отправлю обратно мой желаемый результат ... еще раз спасибо за информацию. –

Добро пожаловать, сэр –

Отзывчивый макет с DIV процентами

ответ

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