1. 首页
  2. 问答
  3. 使用div标签和CSS创建布局

使用div标签和CSS创建布局

2015-10-06 40 views
0

我试图为网站创建布局。我使用三个div标签，容器和左右。我希望左侧是固定宽度，因为它将是导航。右侧将显示内容。右侧将从数据库加载，因此内容宽度将根据加载的内容而有所不同。目前，宽度只会显示到窗口的宽度，如果最小化窗口，内容会被截断，而不是显示滚动条，并允许用户滚动查看其余数据。以及我也不能让左侧和右侧的div一起显示。有一次，我把他们放在一起，但是中间有一个巨大的差距，这不是我想要达到的。我只是希望得到一些关于如何实现布局的帮助。欢呼声中，使用div标签和CSS创建布局

<style> body { 
 
    background-color: #E0E0E0; 
 
    color: #000000; 
 
} 
 
input[type="text"] { 
 
    width: 75px; 
 
} 
 
#wrapper { 
 
    padding: 10px; 
 
    background-color: #9FF; 
 
    /*margin: 0 auto;*/ 
 
    min-width: 500px; 
 
    overflow: auto; 
 
    border-radius: 25px; 
 
    box-shadow: 10px 10px 5px grey; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
} 
 
.left { 
 
    /*margin:0 auto;*/ 
 
    padding: 15px; 
 
    float: left; 
 
    color: #000000; 
 
    width: 150px; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
} 
 
.right { 
 
    /*margin:0 auto;*/ 
 
    padding: 15px; 
 
    float: right; 
 
    color: #000000; 
 
    min-width: 400px; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
} 
 
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 

 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>Schedule Design</title> 
 
</head> 
 

 
<body bgcolor=""> 
 

 
    <div id="wrapper"> 
 
    <div class="left"> 
 
     <p>This is some text</p> 
 
     <p>Here is some more</p> 
 
     <p>this is another one</p> 
 
     <p>this on is for good measure</p> 
 
    </div> 
 
    <div class="right"> 
 
     <form> 
 
     <table align="center" cellpadding="5px"> 
 
      <tr> 
 
      <th>Employee</th> 
 
      <th>Sunday</th> 
 
      <th>Monday</th> 
 
      <th>Tuesday</th> 
 
      <th>Wednesday</th> 
 
      <th>Thursday</th> 
 
      <th>Friday</th> 
 
      <th>Saturday</th> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 

 
     </table> 
 
     </form> 
 
    </div> 
 

 
    </div> 
 
</body> 
 

 
</html>

来源

2015-10-06 Tyler Foraie

+0

刚刚摆脱浮动：对在正确的股利。 – jessica

回答

1

如果你从你的.right类摆脱float: right;和min-width: 400px;，你应该得到的右窗格中坚持左侧窗格。此外，overflow: auto;将允许您的右窗格滚动其宽度。

<style> body { 
 
    background-color: #E0E0E0; 
 
    color: #000000; 
 
} 
 
input[type="text"] { 
 
    width: 75px; 
 
} 
 
#wrapper { 
 
    padding: 10px; 
 
    background-color: #9FF; 
 
    /*margin: 0 auto;*/ 
 
    min-width: 500px; 
 
    overflow: auto; 
 
    border-radius: 25px; 
 
    box-shadow: 10px 10px 5px grey; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
} 
 
.left { 
 
    /*margin:0 auto;*/ 
 
    padding: 15px; 
 
    float: left; 
 
    color: #000000; 
 
    width: 150px; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
} 
 
.right { 
 
    /*margin:0 auto;*/ 
 
    padding: 15px; 
 
    overflow: auto; 
 
    color: #000000; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
} 
 
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 

 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>Schedule Design</title> 
 
</head> 
 

 
<body bgcolor=""> 
 

 
    <div id="wrapper"> 
 
    <div class="left"> 
 
     <p>This is some text</p> 
 
     <p>Here is some more</p> 
 
     <p>this is another one</p> 
 
     <p>this on is for good measure</p> 
 
    </div> 
 
    <div class="right"> 
 
     <form> 
 
     <table align="center" cellpadding="5px"> 
 
      <tr> 
 
      <th>Employee</th> 
 
      <th>Sunday</th> 
 
      <th>Monday</th> 
 
      <th>Tuesday</th> 
 
      <th>Wednesday</th> 
 
      <th>Thursday</th> 
 
      <th>Friday</th> 
 
      <th>Saturday</th> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td>Tyler Foraie</td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" placeholder="Start Time" /> 
 
      </td> 
 
      </tr> 
 

 
     </table> 
 
     </form> 
 
    </div> 
 

 
    </div> 
 
</body> 
 

 
</html>

来源

2015-10-06 20:17:39 CDelaney

+0

好吧，所以你在这里发生的事情非常接近我在寻找什么，除非你最小化屏幕右侧的内容仍然被切断，并且不会创建滚动条 –

+0

抱歉忘记我刚刚说的它的工作原理。谢谢！ –

0 
.left{ display:inline-block;} 

    /* or */ 

.right{ display:inline-block; }

两个班将被内联

来源

2015-10-06 20:14:59 Jan

+0

请解释一下这是干什么的？ – Aziz

+0

左右类将被内联。左侧的左侧班级和右侧的右侧班级。 – Jan

+0

你使用“浮动”，但你没有指定你的类的位置。你应该采取“浮动”，并尝试与显示：内联块; – Jan

相关问题

 相关问题