Question

我正在尝试创建一个3列网页。如何将标题和段落置于中间列的中心？当我在最后一栏输入信息时，如何将文本右对齐？感谢您的帮助，谢谢。

另外，如何将页面中间的副本右侧对齐？

＆＃13;

*{  
    font-family: Melvetica;
    margin: 0px;
    padding: 0px;
    }

body{
    background-color: #6B6A67;
     }     
#container{
    width: 920px;
    background-color: white;
    padding: 10px;
    margin-left: auto; /*will center your page*/
    margin-right: auto; /*will center your page*/
    }
    
h1, h2{
   text-align: center;
    }



li{
    text-align: center;
    padding: 5px;
    }
h4{
    padding: 5px;
    text-align: center;
    }

/*To style an ID within an ID under it use the parent ID--start with header then call the ID you want to select*/
#container #header{
    height: 80px;
    background-color: #ADA9A0;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 20px;
    margin-bottom: 5px; /*To add empty space to bottom of the element*/
    }  
#container #navigation{
    margin-top: 5px;
    background-color: #ADA9A0;
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 2px solid #ADA9A0;
    }    
    
#container #content{
    background-color: #D9D5CE;
    min-height: 300px; 
    margin-top: 5px;
    margin-bottom: 5px; /*To add empty space to bottom of the element*/
    }  
    
#container #content #sidebar1{
    background-color: #ADA9A0;
    float: left;
    width: 200px;
    min-height: 300px;
    margin-bottom: 3px;
    }     
#container #content #column1{
    background-color: white;
    min-height: 300px;
    margin-bottom: 3px; 
    margin-left: 200px;
    margin-right: 200px;
    margin: 0;
    }         
#container #content #sidebar2{
    background-color: #ADA9A0;
    float: right;
    width: 200px;
    min-height: 300px;
    margin-bottom: 3px;
    margin-top:-300px;
    }  
   
#container #footer{
    padding-top: 1px;
    border-top: 1px solid black;
}
.CR{
       text-align: left;  
       position: fixed;      
}
.Instructor{
    text-align: right;
    position: fixed right;
    }

/*NAV LINKS - add an "a" to style items under the ID'S*/
#container #navigation a{
    color: white;
    text-decoration: none; /*gets rid of the underlining effect*/
    padding-top: 5px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 10px;
    }
    

    
/*To add a hover put a:hover*/
#container #navigation a:hover{
    color: red;
    background-color: white;
    }
    
    
#container #content #left {
    font-family: Arial;
    }

＆＃13;

<!DOCTYPE html>

<html>
<head>

  <link type="text/css" rel="stylesheet" href="stylesheet.css" />

 <title> My Portfolio </title>
</head>

<body>
	<div id="container">
        <div id="header"> 
            <h1> CIS 2336- Internet Applications </h1>
            <h2> DeVoll </h2>
        </div>
        <div id="navigation">
            <a href="http://tdevoll16f.heyuhnem.com/index1.html/CIS 2336/My Portfolio/MyPage1.html">Home</a>
            <a href="#">HTML/CSS</a>
            <a href="#">PHP</a>       
        </div>
        <div id="content"> 
        
            <div id="sidebar1">
                <h4> Instuctor: Natalia Fofanova </h4>
                <ul>
                    <li> Lectures </li>
                    <li> Syllabus </li>
                    <li> Helpful Videos </li>
                </ul>
            </div>
            
            <div id="column1">
                <h2> HTML and CSS </h2>
                <p>HTML (Hypertext Markup Language) 
                and CSS (Cascading Style Sheets) are two
                of the core technologies 
                for bulding a website. <p>
                
 <p>HTML provides a structure for the page by using "Hypertext" which refers to the hyperlinks that an HTML page may contain. Also, "Markup language" refers to the way tags are used to define the page layout and elements within the page. </p>
<p>CSS provides the visual layout of web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML. CSS helps Web developers create a uniform look across several pages of a Web site. Instead of defining the style of each table and each block of text within a page's HTML, commonly used styles need to be defined only once in a CSS document. </p>
 </p>
            </div>
            
            <div id="sidebar2">
            dddd
            </div>
     
        </div> 
        
        <footer>
            <div id="footer"> 
                <div class="CR"> 
                    <h4> Copyright 2016 </h4>
            </div>
                <div class="Instructor"> 
                    <a href="http://heyuhnem.com/"><h4>Copyright Natalie Fofanova </h4> </a>
            </div>
                
        </footer>

</body>
</html>

＆＃13;

Answer 1

您只需使用text-align

即可

即：text-align : right，text-align : center

Answer 2

我将float: left;和width: calc(100% - 400px);添加到#column1（ 400px是侧边栏的总宽度）我提出了margin-left和{{1} }来自margin-right和来自#column1的{{1}}（不再需要）

对于版权文本，我补充说：

margin-top:-300px;

＆＃13;

#sidebar2

＆＃13;

.Instructor h4 {
  text-align: right;
}

＆＃13;

Answer 3

为了创建3列布局，您必须为每列提供宽度。在您的情况下，左列和右列各有200px。中间栏490px。每列将浮动到左侧。浮动元素会使其父容器崩溃。 Here is a great tutorial on floats

    *{  
    font-family: Melvetica;
    margin: 0px;
    padding: 0px;
    }

body{background-color: #6B6A67;}     

#container{
            width: 920px;
            background-color: white;
            padding: 10px;
            margin-left: auto; /*will center your page*/
            margin-right: auto; /*will center your page*/
          }

h1, h2{ text-align: center;}

li{
    text-align: center;
    padding: 5px;
    list-style: none; /*removes bullets from sidebar1*/
    }

h4{
    padding: 5px;
    text-align: center;
    }

/*To style an ID within an ID under it use the parent ID--start with header then call the ID you want to select */
 #header{
    height: 80px;
    background-color: #ADA9A0;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 20px;
    margin-bottom: 5px; /*To add empty space to bottom of the element*/
    background: green;
    }  


 #navigation{
    margin-top: 5px;
    background-color: pink;
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 2px solid #ADA9A0;
    }    

 #content{
    min-height: 300px; 
    margin-top: 5px;
    margin-bottom: 5px; /*To add empty space to bottom of the element*/
   }  

 #sidebar1{
    background-color: yellow;
    float: left;
    width: 200px;
    min-height: 300px;
    margin-bottom: 3px;
    margin-right: 5px;
    } 

 #column1{
    background-color: teal;
    min-height: 300px;
    margin-bottom: 3px; 
    padding: 0 10px;
    margin: 0;
    width: 490px;
    float: left;
   }   

 #sidebar2{
    background-color: green;
    float: left;
    width: 200px;
    min-height: 300px;
    margin-bottom: 3px;
    margin-left: 5px; 
   }  

 #footer{
    padding-top: 1px;
    border-top: 1px solid black;
    clear: both;
    background: pink;
    }

.CR{
    text-align: left;  
    position: fixed;      
    }

.Instructor{
    text-align: right;
    position: fixed right;
    }

/*NAV LINKS - add an "a" to style items under the ID'S*/
 #navigation a{
                color: white;
                text-decoration: none; /*gets rid of the underlining effect*/
                padding-top: 5px;
                padding-bottom: 6px;
                padding-left: 10px;
                padding-right: 10px;
                }



/*To add a hover put a:hover*/
 #navigation a:hover{
                      color: red;
                      background-color: white;
                      }

#left {font-family: Arial;}

如何对齐列中的文字？

3 个答案: