Question

我已经开始为我的一个项目开发一个新的基于PHP的聊天系统，最近我花了很多时间阅读有关响应式布局，我已经决定避免使用bootstrap即便如此，它确实提供了许多出色的功能，而且我觉得从头开始学习，然后使用已经建立的一套代码就可以学到更多......这就是说。

以下是我放在一起的示例代码，它的行为与我的预期不符。

<!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”一样。

任何想法都会非常感激。

Answer 1

＆＃13;

#container 
  {
    position:relative;
    width:100%;
    height:600px;
    margin: 0 auto;
    border: 1px solid red;
	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;
  }

＆＃13;

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

＆＃13;

您需要以百分比的形式工作，并考虑总宽度的边距。

例如：在＆＃39;消息＆＃39;总宽度将达到75％，因为我们有71％的宽度加上两个边距（左和右）2％，...在＆＃39;用户＆＃39;总宽度将是25％，因为我们有宽度：21％加上2％的2％（左和右）......总计= 100％。

与'message_entry'相关：我们需要的宽度与用户＆＃39;相同。 +＆＃39;消息＆＃39;。

＆＃39;用户＆＃39;有两个水平边距（左边和右边），以及相同的消息＆＃39 ;;但唯一影响我们的是用户＆＃39;留下一条和“消息”＃39;正确对象，真爱; ＆＃39;用户的权利和＆＃39;消息＆＃39;左边没有，因为＆＃39; message_entry＆＃39;他们也有。这就是为什么＆＃39; message＆＃39;宽度为96％。

高度参数的逻辑相同。

注意：使用'box-sizing：border-box'，你只会担心de margins。

具有DIV百分比的响应式布局

1 个答案: