-2

我不能設法得到包裝與它的內容擴大...CSS網頁佈局適應於內容

這裏的結構：

* { 
padding: 0; 
margin: 0; 
} 
body { 
background-color: #ccc; 
background-repeat:repeat; 
font: Tahoma, Geneva, sans-serif; 
color: #FFF; 
} 
.wrapper { 
width: 95%; 
margin: 0 auto; 
} 
/* ------------------------ Start Header -----------------*/ 
.header { 
background-color: #333; 
} 
* html .header {height:110px} /* IE Min-Height Hack */ 
/* ------------------------ End Header -----------------*/ 
/* ------------------------ Start Nav Bar -----------------*/ 
.nav-bar { 
background-color: #E8E8E8; 
margin: 0px 0px 13px 0px; 
min-height: 17px; 
padding: 13px; 
border: 1px solid #AEAEAE; 
} 
* html .nav-bar {height: 17px} /* IE Min-Height Hack */ 

.nav-links li { 
list-style: none; 
display: inline; 
margin-right: 16px; 
font: normal small-caps normal 12px/1.4 Tahoma, Geneva, sans-serif; 
} 

.nav-links li a:link { 
background-color: #E8E8E8; 
color: #333; 
font-weight: bold; 
font-size: 13px; 
text-decoration: none; 
} 
.nav-links li a:visited { 
background-color: #E8E8E8; 
color: #333; 
font-weight: bold; 
font-size: 13px; 
text-decoration: none; 
} 
.nav-links li a:hover { 
background-color: #E8E8E8; 
color: #999; 
font-weight: bold; 
font-size: 13px; 
text-decoration: none; 
} 
/* ------------------------ End Nav Bar -----------------*/ 
/* ------------------------ Start outer content -----------------*/ 
#container { 
    overflow: hidden; 
    width: 100%; 
} 

#outercontent { 
background-color: #e8e8e8; 
width: 97,5%; 
padding: 13px; 
min-height: 655px; 
margin-bottom: 13px; 
border: 1px solid #AEAEAE; 

    background-color: orange; 
    /*padding-bottom: 100em;*/ 
    /*margin-bottom: -500em;*/ 
} 
* html #outercontent {height: 655px} /* IE Min-Height Hack */ 
/* ------------------------ End outer content -----------------*/ 
/* ------------------------ Start Columns -----------------*/ 
#centercolumn { /* Parent Wrapper for inside boxes background-color: #333333; */ 
background-color: #333333; 
margin: 0px 0px 0px 0px; 
display: inline; /* IE Hack */ 
padding: 7px; 
width: 80%; 
min-height: 630px; 
float: left; 

    background-color: red; 
/* padding-bottom: 250em; */ 
/* margin-bottom: -250em; */ 

} 

.p { 
font: normal small-caps normal 40px/1.2 Tahoma, Geneva, sans-serif; 
} 

table.db-table-products { border-right:1px solid #ccc; border-bottom:1px solid #ccc; background-color:#FFF; overflow:hidden;} 
table.db-table-products th { padding:5px; border-left:1px solid #ccc; border-top:1px solid #ccc; font: normal small-caps normal 12px/1.2 Tahoma, Geneva, sans-serif, bold; background-color: #FFF; color: #000;} 
table.db-table-products td { padding:4px; border-left:1px solid #ccc; font: normal small-caps normal 10px/1.2 Tahoma, Geneva, sans-serif; border- top:1px solid #ccc; background-color:#999;} 

table.db-table-products caption { 
font: normal small-caps normal 16px/1.4 Tahoma, Geneva, sans-serif; 
display: table-caption; 

} 

table.db-table-products hr { 
display: block; 
margin-top: 0.5em; 
margin-bottom: 0.5em; 
margin-left: auto; 
margin-right: auto; 
border-style: inset; 
border-width: 1px; 
} 

/* unvisited link */ 
table.db-table-products a:link { 
color: #FFDD38; 
} 

/* visited link */ 
table.db-table-products a:visited { 
color: #D8C150; 
} 

/* mouse over link */ 
table.db-table-products a:hover { 
color: #D8B70F; 
} 

/* selected link */ 
table.db-table-products a:active { 
color: #D8B70F; 
} 

.rightcolumn { 
margin: 0px 0px 13px 13px; 
padding: 7px; 
display: inline; /* IE Hack */ 
width: 210px; 
min-height: 160px; 
float: left; 
border: 1px solid #AEAEAE; 
background-color: #ccc; 
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif; 
color: #666666; 
} 
/* ------------------------ End Columns -----------------*/ 
/* ------------------------ Start Footer -----------------*/ 
#footer { 
border: 1px solid #AEAEAE; 
padding: 15px; 
margin-bottom: 13px; 
background-color: #e8e8e8; 
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif; 
color: #666666; 

    background-color: blue; 
/* padding-bottom: 100em; */ 
/* margin-bottom: -200em; */ 
} 
/* ------------------------ End Footer -----------------*/ 

h1 { 
font-size: 23px; 
font-family: Arial; 
font-weight:bold; 
font: normal small-caps normal 23px/1.4 Tahoma, Geneva, sans-serif; 
} 
.float { 
float: left; 
padding: 0px 10px 0px 0px; 
} 
img { 
border: none; 
} 
/* Links */ 
a:link { 
color: #fff; 
text-decoration: underline; 
} 
a:visited { 
color: #fff; 
text-decoration: none; 
} 
a:hover { 
color: #333333; 
background-color: #fff; 
text-decoration: none; 
}

這裏，它是HTML代碼：

<!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" /> 
<!-- <link href="table-css/table-db.css" rel="stylesheet" type="text/css"> --> 
<link rel="stylesheet" type="text/css" href="main4.css" /> 
<title>Products Market</title> 
</head> 
<body> 
<div id="container"> 
<!-- Start Wrapper --> 
<div class="wrapper"> 
<!-- Start Header --> 
<div class="header"> <img src="images/logo.jpg" alt="Logo" width="1200" height="150" /> 
</div> 
<!-- End Header --> 
<!-- Start Navigation Bar --> 
<div class="nav-bar"> 
<ul class="nav-links"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">24h Monetary Market</a></li> 
    <li><a href="#">Actual Monetary Market</a></li> 
    <li><a href="#">Products Market</a></li> 
    <li><a href="#">Jobs Market</a></li> 
    <li><a href="#">Contact me</a></li> 
</ul> 
</div> 
<!-- End Navigation Bar --> 
<!-- Start Outer Content --> 

<div id="outercontent"> 
<div id="centercolumn"> 
    <h1><b><u>Welcome</u></b></h1> 
    <p> 
<?php include 'test.php'; ?> 
</p><br /> 
</div> 

<!-- Start Right Content --> 
<div class="rightcolumn"> 
    <h1><u><b>About Me</b></u></h1> 
    TEXT </div> 
    <div class="rightcolumn"> 
    <h1><u><b>Search</b></u></h1> 
    </div> 
    <br /> 
    </div> 

    <!-- End Right Content --> 
    </div> 

    <!-- End Outer Content --> 
    <!-- End Outer Content --> 
    <!-- Start Footer --> 
    <div id="footer"> &copy; Copyright with <a href="http://www.code-sucks.com/">Code-Sucks.com</a> 2006-2015 </div> 
    <!-- End Footer --> 
    </div> 
    <!-- End Wrapper --> 
    </div> 
    </div> 

    </body> 
    </html>

我希望佈局的外部達到內容的相同高度？

這裏我們將解決問題。這與petebolduc建議的有點不同，但他的想法幫助我找到了混合解決方案。

所以這是代碼：

* { 
padding: 0; 
margin: 0; 
} 
body { 
background-color: #ccc; 
background-repeat:repeat; 
font: Tahoma, Geneva, sans-serif; 
color: #FFF; 
} 
/* ------------------------ Start Header -----------------*/ 
.header { 
background-color: #333; 
} 
* html .header {height:110px} /* IE Min-Height Hack */ 
/* ------------------------ End Header -----------------*/ 
/* ------------------------ Start Nav Bar -----------------*/ 
.nav-bar { 
background-color: #E8E8E8; 
margin: 0px 0px 13px 0px; 
min-height: 17px; 
padding: 13px; 
border: 1px solid #AEAEAE; 
} 
* html .nav-bar {height: 17px} /* IE Min-Height Hack */ 

.nav-links li { 
list-style: none; 
display: inline; 
margin-right: 16px; 
font: normal small-caps normal 12px/1.4 Tahoma, Geneva, sans-serif; 
} 

.nav-links li a:link { 
background-color: #E8E8E8; 
color: #333; 
font-weight: bold; 
font-size: 13px; 
text-decoration: none; 
} 
.nav-links li a:visited { 
background-color: #E8E8E8; 
color: #333; 
font-weight: bold; 
font-size: 13px; 
text-decoration: none; 
} 
.nav-links li a:hover { 
background-color: #E8E8E8; 
color: #999; 
font-weight: bold; 
font-size: 13px; 
text-decoration: none; 
} 
/* ------------------------ End Nav Bar -----------------*/ 
/* ------------------------ Start outer content -----------------*/ 
#container { 
    overflow: hidden; 
    width: 100%; 
} 
.wrapper { 
vertical-align:top; 
width: 95%; 
margin: 0 auto; 
} 

#outercontent { 
background-color: #e8e8e8; 
width: 97.85%; 
padding: 13px; 
/* min-height: 655px;*/ 
margin-bottom: 13px; 
border: 1px solid #AEAEAE; 
/* height:auto;*/ 
/* position:relative;*/ 
/*text-align:left;*/ 
vertical-align:top; 

/*  background-color: orange; */ 
    /*padding-bottom: 100em;*/ 
    /*margin-bottom: -500em;*/ 
} 
/** html #outercontent {height: 655px;} */ 
/* ------------------------ End outer content -----------------*/ 
/* ------------------------ Start Columns -----------------*/ 
.lefthalf_col { 
width:79.5%; 
display:inline-block; 
position:relative; 
left:0; 
top:0; 
vertical-align:top; 
} 

.righthalf_col { 
width:19.2%; 
display:inline-block; 
position:relative; 
/* right:0;*/ 
left:.9%; 
vertical-align:top; 
} 
#centercolumn { /* Parent Wrapper for inside boxes background-color: #333333; */ 
background-color: #333333; 
/* margin: 0px 0px 0px 0px;*/ 

padding: 7px; 
width:100%; 
min-height: 630px; 
height:auto; 
position:relative; 
top:0; 

/* width: 75%;*/ 
/* min-height: 630px;*/ 
display: inline-block; /* IE Hack */ 
/* top:0;*/ 
/* float: left; */ 

/*  background-color: red; */ 
/* padding-bottom: 250em; */ 
/* margin-bottom: -250em; */ 
} 
.rightcolumn { 
margin: 0px 0px 13px 13px; 
padding: 7px; 
/* display: inline-block; /* IE Hack */*/ 
/* width: 210px;*/ 
width:100%; 
min-height: 160px; 

position:relative; 
top:0; 
border: 1px solid #AEAEAE; 
background-color: #ccc; 
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif; 
color: #666666; 
} 

.p { 
font: normal small-caps normal 40px/1.2 Tahoma, Geneva, sans-serif; 
} 


table.db-table-products { border-right:1px solid #ccc; border- bottom:1px solid #ccc; background-color:#FFF; overflow:hidden;} 
table.db-table-products th { padding:5px; border-left:1px solid #ccc; border-top:1px solid #ccc; font: normal small-caps normal 12px/1.2 Tahoma, Geneva, sans-serif, bold; background-color: #FFF; color: #000;} 
table.db-table-products td { padding:4px; border-left:1px solid #ccc; font: normal small-caps normal 10px/1.2 Tahoma, Geneva, sans-serif; border- top:1px solid #ccc; background-color:#999;} 

table.db-table-products caption { 
font: normal small-caps normal 16px/1.4 Tahoma, Geneva, sans-serif; 
display: table-caption; 

} 

table.db-table-products hr { 
display: block; 
margin-top: 0.5em; 
margin-bottom: 0.5em; 
margin-left: auto; 
margin-right: auto; 
border-style: inset; 
border-width: 1px; 
} 

/* unvisited link */ 
table.db-table-products a:link { 
color: #FFDD38; 
} 

/* visited link */ 
table.db-table-products a:visited { 
color: #D8C150; 
} 

/* mouse over link */ 
table.db-table-products a:hover { 
color: #D8B70F; 
} 

/* selected link */ 
table.db-table-products a:active { 
color: #D8B70F; 
} 
/* ------------------------ End Columns -----------------*/ 
/* ------------------------ Start Footer -----------------*/ 
#footer { 
border: 1px solid #AEAEAE; 
padding: 15px; 
margin-bottom: 13px; 
background-color: #e8e8e8; 
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif; 
color: #666666; 

/* background-color: blue; */ 
/* padding-bottom: 100em; */ 
/* margin-bottom: -200em; */ 
} 
/* ------------------------ End Footer -----------------*/ 

h1 { 
font-size: 23px; 
font-family: Arial; 
font-weight:bold; 
font: normal small-caps normal 23px/1.4 Tahoma, Geneva, sans-serif; 
} 
.float { 
float: left; 
padding: 0px 10px 0px 0px; 
} 
img { 
border: none; 
} 
/* Links */ 
a:link { 
color: #fff; 
text-decoration: underline; 
} 
a:visited { 
color: #fff; 
text-decoration: none; 
} 
a:hover { 
color: #333333; 
background-color: #fff; 
text-decoration: none; 
}

這裏是html代碼：

<!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" /> 

    <link rel="stylesheet" type="text/css" href="main7.css" /> 
    <title>Products Market</title> 
    </head> 
    <body> 
    <div id="container"> 
    <!-- Start Wrapper --> 
    <div class="wrapper"> 
    <!-- Start Header --> 
    <div class="header"> <img src="images/logo.jpg" alt="Logo" width="100%" height="150" /> 
    </div> 
    <!-- End Header --> 
    <!-- Start Navigation Bar --> 
    <div class="nav-bar"> 
    <ul class="nav-links"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">24h Monetary Market</a></li> 
    <li><a href="#">Actual Monetary Market</a></li> 
    <li><a href="#">Products Market</a></li> 
    <li><a href="#">Jobs Market</a></li> 
    <li><a href="#">Contact me</a></li> 
    </ul> 
    </div> 
    <!-- End Navigation Bar --> 
    <!-- Start Outer Content --> 
    <!-- <div class="tablegraph"> 
    <div class="row"> --> 
    <div id="outercontent"> 
    <div class="lefthalf_col"> 
    <div id="centercolumn"> 
    <h1><b><u>Welcome</u></b></h1> 
    <p> 
    <?php // include 'query.php'; 
    include 'query2.php'; ?> ‫ 
    </p><br /> 
    </div> 
    </div> 
    <!-- Start Right Content --> 
    <div class="righthalf_col"> 
    <div class="rightcolumn"> 
    <h1><u><b>About Me</b></u></h1> 
    TEST 
    </div> 
    <div class="rightcolumn"> 
    <h1><u><b>Search</b></u></h1> 
    <br /> 
    TEST 
    </div> 
    </div> <!-- half_col --> 


    <!-- End Right Content --> 
    </div> 
    <!-- End Outer Content --> 
    </div> 

    <!-- Start Footer --> 
    <div id="footer"><p> &copy; Copyright with <a href="http://www.code-sucks.com/" target="_blank">Code-Sucks.com</a> 2006-2015 </p> 
    <p>Thanks to <a href="http://www.stackoverflow.com/" target="_blank">Stackoverflow.com</a> guys! </p> 

    </div> 
    <!-- End Footer --> 

    </div> 
    <!-- End Outer Content --> 
    </div> 
    <!-- End Wrapper --> 
    <!--</div> 
    </div>--> 

    </body> 
    </html>

到底問題似乎是與「浮動」屬性。改變這種情況，並將我需要的DIV內容放入包裝DIV部分和外部內容DIV部分，問題就解決了。

來源

2015-06-25 Alberto Supertramp Giorgis

同意@PraveenKumar ...通過你的問題你承認有可用的研究，但寧願有代碼爲你寫。這是一個很棒的網站，很多人願意幫助那些認真嘗試自我幫助的人。 – petebolduc

只是看起來很簡單，如果你不檢查我之前寫過的東西。否則，你會看到，即使我在幾個月內不是程序員，但我已經學會了跨域json審問，數據庫更新等的自動cron作業。這不知道js和php的單詞。 –

爲什麼我的問題對你來說似乎很容易，因爲所有的CSS教程（我發現）似乎只是從非常低的層次跳到上層。所以，如果你想我可以刪除代碼，並簡單地保留這個問題，所以我會做你說的作業，我不想做。在任何其他情況下，無論如何，thx爲您的時間和關注。 –

我更改了代碼...

CSS

* { 
padding: 0; 
margin: 0; 
} 
body { 
background-color: #ccc; 
background-repeat:repeat; 
font: Tahoma, Geneva, sans-serif; 
color: #FFF; 
} 
.wrapper { 
width: 95%; 
margin: 0 auto; 
} 
/* ------------------------ Start Header -----------------*/ 
.header { 
background-color: #333; 
} 
* html .header {height:110px} /* IE Min-Height Hack */ 
/* ------------------------ End Header -----------------*/ 
/* ------------------------ Start Nav Bar -----------------*/ 
.nav-bar { 
background-color: #E8E8E8; 
margin: 0px 0px 13px 0px; 
min-height: 17px; 
padding: 13px; 
border: 1px solid #AEAEAE; 
} 
* html .nav-bar {height: 17px} /* IE Min-Height Hack */ 

.nav-links li { 
list-style: none; 
display: inline; 
margin-right: 16px; 
font: normal small-caps normal 12px/1.4 Tahoma, Geneva, sans-serif; 
} 

.nav-links li a:link { 
background-color: #E8E8E8; 
color: #333; 
font-weight: bold; 
font-size: 13px; 
text-decoration: none; 
} 
.nav-links li a:visited { 
background-color: #E8E8E8; 
color: #333; 
font-weight: bold; 
font-size: 13px; 
text-decoration: none; 
} 
.nav-links li a:hover { 
background-color: #E8E8E8; 
color: #999; 
font-weight: bold; 
font-size: 13px; 
text-decoration: none; 
} 
/* ------------------------ End Nav Bar -----------------*/ 
/* ------------------------ Start outer content -----------------*/ 
#container { 
    overflow: hidden; 
    width: 100%; 
    clear:both; 
} 

#outercontent { 
background-color: orange; 
padding: 10px; 
min-height: 655px; 
margin-bottom: 13px; 
border: 1px solid #AEAEAE; 
clear:both; 
box-sizing: border-box; 
} 
/* ------------------------ End outer content -----------------*/ 

/* ------------------------ Start Columns -----------------*/ 
#centercolumn { /* Parent Wrapper for inside boxes background-color: #333333; */ 
background-color: red; 
margin: 0; 
padding: 20px; 
width: 80%; 
min-height: 630px; 
float: left; 
box-sizing: border-box; 
} 
I 
.rightcolumn { 
padding: 10px; 
padding-top: 0px; 
width: 20%; 
float: left; 
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif; 
color: #666666; 
margin: 0px 0px 0px 0px; 
box-sizing: border-box; 
} 

.rightcolumn-block { 
padding: 7px; 
min-height: 160px; 
border: 1px solid #AEAEAE; 
background-color: #ccc; 
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif; 
color: #666666; 
} 

.p { 
font: normal small-caps normal 40px/1.2 Tahoma, Geneva, sans-serif; 
} 

table.db-table-products { border-right:1px solid #ccc; border-bottom:1px solid #ccc; background-color:#FFF; overflow:hidden;} 
table.db-table-products th { padding:5px; border-left:1px solid #ccc; border-top:1px solid #ccc; font: normal small-caps normal 12px/1.2 Tahoma, Geneva, sans-serif, bold; background-color: #FFF; color: #000;} 
table.db-table-products td { padding:4px; border-left:1px solid #ccc; font: normal small-caps normal 10px/1.2 Tahoma, Geneva, sans-serif; border- top:1px solid #ccc; background-color:#999;} 

table.db-table-products caption { 
font: normal small-caps normal 16px/1.4 Tahoma, Geneva, sans-serif; 
display: table-caption; 

} 

table.db-table-products hr { 
display: block; 
margin-top: 0.5em; 
margin-bottom: 0.5em; 
margin-left: auto; 
margin-right: auto; 
border-style: inset; 
border-width: 1px; 
} 

/* unvisited link */ 
table.db-table-products a:link { 
color: #FFDD38; 
} 

/* visited link */ 
table.db-table-products a:visited { 
color: #D8C150; 
} 

/* mouse over link */ 
table.db-table-products a:hover { 
color: #D8B70F; 
} 

/* selected link */ 
table.db-table-products a:active { 
color: #D8B70F; 
} 


/* ------------------------ End Columns -----------------*/ 
/* ------------------------ Start Footer -----------------*/ 
#footer { 
border: 1px solid #AEAEAE; 
padding: 15px; 
margin-bottom: 13px; 
background-color: #e8e8e8; 
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif; 
color: #666666; 

    background-color: blue; 
/* padding-bottom: 100em; */ 
/* margin-bottom: -200em; */ 
} 
/* ------------------------ End Footer -----------------*/ 

h1 { 
font-size: 23px; 
font-family: Arial; 
font-weight:bold; 
font: normal small-caps normal 23px/1.4 Tahoma, Geneva, sans-serif; 
} 

h2 { 
font-size: 23px; 
font-family: Arial; 
font-weight:bold; 
font: normal small-caps normal 23px/1.4 Tahoma, Geneva, sans-serif; 
} 



.float { 
float: left; 
padding: 0px 10px 0px 0px; 
} 
img { 
border: none; 
} 
/* Links */ 
a:link { 
color: #fff; 
text-decoration: underline; 
} 
a:visited { 
color: #fff; 
text-decoration: none; 
} 
a:hover { 
color: #333333; 
background-color: #fff; 
text-decoration: none; 
}

HTML

<!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" /> 
<!-- <link href="table-css/table-db.css" rel="stylesheet" type="text/css"> --> 
<link rel="stylesheet" type="text/css" href="main4.css" /> 
<title>Products Market</title> 
</head> 
<body> 

<div id="container"> 
<!-- Start Wrapper --> 
<div class="wrapper"> 
<!-- Start Header --> 
<div class="header"> <img src="images/logo.jpg" alt="Logo" width="1200" height="150" /> 
</div> 
<!-- End Header --> 
<!-- Start Navigation Bar --> 
<div class="nav-bar"> 
<ul class="nav-links"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">24h Monetary Market</a></li> 
    <li><a href="#">Actual Monetary Market</a></li> 
    <li><a href="#">Products Market</a></li> 
    <li><a href="#">Jobs Market</a></li> 
    <li><a href="#">Contact me</a></li> 
</ul> 
</div> 
<!-- End Navigation Bar --> 
<!-- Start Outer Content --> 

<div id="outercontent"> 
    <div id="centercolumn"> 
      <h1><b><u>Welcome</u></b></h1> 
      <p> 
     <?php include 'test.php'; ?> 
     </p><br /> 
    </div> 

    <!-- Start Right Content --> 
    <div class="rightcolumn"> 

      <div class="rightcolumn-block"> 
       <h2><u><b>About Me</b></u></h2> 
       TEXT 
      </div> 

      <div class="rightcolumn-block"> 
       <h2><u><b>Search</b></u></h2> 
       TEXT 
      </div> 

    </div> <!-- End Right Content --> 


    </div> 

    <!-- End Outer Content --> 
    <!-- End Outer Content --> 
    <!-- Start Footer --> 
    <div id="footer"> &copy; Copyright with <a href="http://www.code-sucks.com/">Code-Sucks.com</a> 2006-2015 </div> 
    <!-- End Footer --> 
    </div> 
    <!-- End Wrapper --> 
    </div> 
    </div> 

</body> 
</html>

CHANGES

1]我簡單地複製相同的CSS爲h1和製作css爲h2。原因是你的頁面上只能有1 h1標籤，它應該是頁面的標題。我使用了相同的CSS，但可以根據需要進行更改。

2]您的代碼編寫方式有兩個右列。我將rightcolumn重寫爲一個換行符，並在.rightcolumn內部添加了一個.rightcolum-block來保存您想要的每個塊。這使您可以使用與側邊欄內容分開的列。

3]看看#outercontent的CSS，你會看到clear:both;這迫使#outercontent隨着其中包含的內容拉伸。你也會看到box-sizing: border-box;這也被添加到centercolumn和rightcolumn。這將強制填充，邊框和邊距包含在元素的設置寬度中，而不是添加要添加到元素的每個元素的設置。

4]我從#outercontent刪除寬度。這個設置沒有必要。

5]寬度百分比設置爲centercolumn，像素寬度設置爲rightcolumn。它需要是一個或另一個。百分比對您的應用程序更好，所以我將rightcolumn的寬度更改爲20％。

我希望這有助於...花時間比較您的代碼和我的代碼以查看更改。如果你不明白類型的CSS和屬性到谷歌。 http://www.w3schools.com/通常是第一個，並提供易於理解的屬性/屬性的描述。

來源

2015-06-26 13:26:48 petebolduc

首先thx很多爲您的答案。我會盡快測試這些變化。我試過清楚：兩者;代碼，但它沒有奏效。也許我錯過了別的東西。我將在代碼發佈後發佈。再次thx。 –

你是多麼歡迎...如果你有任何問題，只要求 – petebolduc

解決，檢查郵件解決方案！ –

CSS網頁佈局適應於內容

回答

CSS

HTML

CHANGES

相關問題