Html 3列div布局不适合我
我试着做三个简单的专栏，但我没有任何运气 在过去的两个小时里，我做了一些搜索，尝试了不同的方法，但都没有效果 我想我错过了一些非常简单的东西…请帮助和提前感谢 HTML:Html 3列div布局不适合我,html,css,Html,Css,我试着做三个简单的专栏，但我没有任何运气 在过去的两个小时里，我做了一些搜索，尝试了不同的方法，但都没有效果 我想我错过了一些非常简单的东西…请帮助和提前感谢 HTML: 您的代码在尝试进行故障排除时看起来非常复杂。我建议从赤骨（3个浮动div）开始，然后从那里开始。另外，我注意到你的内容代码的全部都在你的头部标签中，而不是你的身体标签中。在打开body标签之前，先关闭head标签，看看这是否有帮助（不确定具体错误是什么）。似乎只有三个简单的列有很多代码。。。你想创造什么？表格？你听说过boot
您的代码在尝试进行故障排除时看起来非常复杂。我建议从赤骨（3个浮动div）开始，然后从那里开始。另外，我注意到你的内容代码的全部都在你的头部标签中，而不是你的身体标签中。在打开body标签之前，先关闭head标签，看看这是否有帮助（不确定具体错误是什么）。似乎只有三个简单的列有很多代码。。。你想创造什么？表格？你听说过bootstrap吗？请描述一下你想在这个小提琴手身上实现什么：
<!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>Get Involved | Rock Solid</title>
<link href="css/cef_cep.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="images/rsfavicon7.png" />
<style type="text/css"></style>
<body>
<div id="container">
<div id="ad">
<center><img src="images/rsheader.jpg" alt="Loading image..." class="featuredimage" /></center>
</div><!--end ad-->
<div class="div1">
<ul>
<li><a href="index.html" class="noborder leftedge"> HOME </a></li>
<li><a href="about.html"> ABOUT US </a></li>
<li><a href="get-involved.html"> GET INVOLVED </a></li>
<li><a href="employment.html"> EMPLOYMENT OPPORTUNITIES </a></li>
<li><li><a href="contact.html"> CONTACT </a></li>
<li><li><a href="https://gator4062.hostgator.com:2083/" class="rightedge"> LOGIN </a></li>
</ul>
<br />
<br />
<br />
<br />
</div><!---end div1--->
<div id="rsfeature">
<center><img src="images/rsfeature3.jpg" /></center>
</div>
<div id="main">
<p align="justify">
<br />
<font size="4" style="font-weight:900"><font style="text-align:left">GET INVOLVED</font></font>
<br />
<br />
Since our services are free of charge to youth, we encourage the members and organizations in the community to support us in our cause of "Empowering an educational revolution". Below are the main ways that you can support our cause and make a difference.
<div id="leftcol">
<br />
<font color="#3366CC" font size="4"><font style="font-weight:bold">Become A Volunteer</font></font>
<br />
<br />
Volunteers play a major and vital role in the mission of Rock Solid. From clerical work to mentoring to serving on the Board of Directors, our volunteers do it all! There is always so much to do and our volunteers enjoy a sense of fulfillment as their role plays a huge part in the execution of our mission.
<br />
<br />
<a href="employment.html"><font color="#0000FF">Click here</font></a></a> to become a volunteer.</a>
<br />
<br />
<hr style=" border: 1px dashed #999; width:300px;" />
<br />
<font color="#3366CC" font size="4"><font style="font-weight:bold">Become A Sponsor</font></font>
<br />
<br />
We have an excellent sponsorship program whereby you can sponsor a child/children for an entire year. This sponsorship grants the child membership into the Learning Academy, Mentoring Program and Sports Program, and covers any other expenses (i.e. field-trips, workshops, etc.). You can also become a program sponsor or community center sponsor.
<br />
<br />
<a href="#"><font color="#0000FF">Click here</font></a> to become a sponsor now!</a>
<br />
<br />
<font style="font-weight:bold">Download: </font><a href="images/RSCF Brochure 2014.pdf"><font color="#0000FF">Sponsorship Brochure</font></a> | <a href="#"><font color="#0000FF">Sponsorship Form</font></a>
<br />
<font color="#FFFFFF">Download: <a href="images/RSCF Donor Recognition Chart rev1-13 FINAL.pdf"><font color="#0000FF">Donor/Sponsor Recognition Chart</font></a>
<br />
<br />
<br />
</font>
</div><!--end leftcol-->
<div id="rightcol">
<br />
<font color="#3366CC" font size="4"><font style="font-weight:bold">Become A Community Partner</font></font>
<br />
<br />
Partnering with Rock Solid is an opportunity for different organizations to join, enhance, and expand our cause of creating an educational revolution. As a community partner, you can participate in any level of involvement from fundraising to developing an outreach program for your organization in your community.<br />
<br />
To become a community partner please contact us at info@rocksolidcommunity.org and be sure to include your full contact information and your business's information.
<br />
<br />
<hr style=" border: 1px dashed #999; width:300px;" />
<br />
<font color="#3366CC" font size="4"><font style="font-weight:bold">Donate Today</font></font>
<br />
<br />
No matter the size of your donation, we will gladly use it to advance our mission of "Empowering an educational revolution". We also welcome in-kind donations. At Rock Solid, every gift matters and we look forward to partnering up with you!
<br />
<br />
<a href="#"><font color="#0000FF">Click here</font></a> to donate now!</a>
<br />
<br />
<font style="font-weight:bold">Download: </font><a href="images/RSCF Brochure 2014.pdf"><font color="#0000FF">Donation Brochure</font></a> | <a href="#"><font color="#0000FF">Donation Form</font></a>
<br />
<font color="#FFFFFF">Download: <a href="images/RSCF Donor Recognition Chart rev1-13 FINAL.pdf"><font color="#0000FF">Donor/Sponsor Recognition Chart</font></a>
<br />
<br />
<br /> <!--end rightcol--->
<div id="rightcol2">
<br />
<font color="#3366CC" font size="4"><font style="font-weight:bold">Become A Community Partner</font></font>
<br />
<br />
Partnering with Rock Solid is an opportunity for different organizations to join, enhance, and expand our cause of creating an educational revolution. As a community partner, you can participate in any level of involvement from fundraising to developing an outreach program for your organization in your community.<br />
<br />
To become a community partner please contact us at info@rocksolidcommunity.org and be sure to include your full contact information and your business's information.
<br />
<br />
<hr style=" border: 1px dashed #999; width:300px;" />
<br />
<font color="#3366CC" font size="4"><font style="font-weight:bold">Donate Today</font></font>
<br />
<br />
No matter the size of your donation, we will gladly use it to advance our mission of "Empowering an educational revolution". We also welcome in-kind donations. At Rock Solid, every gift matters and we look forward to partnering up with you!
<br />
<br />
<a href="#"><font color="#0000FF">Click here</font></a> to donate now!</a>
<br />
<br />
<font style="font-weight:bold">Download: </font><a href="images/RSCF Brochure 2014.pdf"><font color="#0000FF">Donation Brochure</font></a> | <a href="#"><font color="#0000FF">Donation Form</font></a>
<br />
<font color="#FFFFFF">Download: <a href="images/RSCF Donor Recognition Chart rev1-13 FINAL.pdf"><font color="#0000FF">Donor/Sponsor Recognition Chart</font></a>
<br />
<br />
<br /> <!--end rightcol2--->
</div><!--end main-->
<div id="footer" class="topleft topright">
<a href="terms-of-use.html">Terms of Use</a> <a href="privacy-policy.html">Privacy Policy</a> <a href="website-feedback.html">Website Feedback</a>
</div><!--end footer-->
<div id="footer2" class="bottomleft bottomright">
<ul>
<li><font style="font-weight:900"><a href="about.html">ABOUT US</a></font></li>
<li> Our Mission and Vision</li>
<li> Our People</li>
<li> Our Outreach and Programs</li>
<li> Our Community Partners</li>
</ul>
<ul>
<li><font style="font-weight:900"><a href="get-involved.html">GET INVOLVED</a></font></li>
<li> Become A Volunteer</li>
<li> Become A Sponsor</li>
<li> Become A Community Partner</li>
<li> Donate Today</li>
</ul>
<ul>
<li><font style="font-weight:900"><a href="employment.html">EMPLOYMENT OPPORTUNITIES</a></font></li>
<li> Volunteer</li>
<li> Part-time</li>
<li> Full-time</li>
</ul>
<ul>
<li><font style="font-weight:900"><a href="contact.html">CONTACT</a></font></li>
</ul>
<ul>
<li><font style="font-weight:900"><a href="https://gator4062.hostgator.com:2083/">LOGIN</a></font></li>
</ul>
</div>
<!--end footer2-->
<div id="footer3">
<br />
Copyright © 2014 Rock Solid Community Foundation. All rights reserved.
<br />
<br />
RSCF is a nonprofit organization whose mission is to "empower an educational revolution throughout the South Los Angeles community and beyond..."
<br />
<br />
</div><!--end footer-->
</div><!--end container-->
</head>
</body>
</html>
@charset "UTF-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
text-decoration:none;
color: black;
}
a.hover {
text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Arial" Gadget, sans-serif;
font-weight: normal;
text-transform: uppercase;
line-height: 100%;
margin-top: 0;
}
h1 {
font-family: "Arial" Gadget, sans-serif;
font-size:16px;
font-weight: 100;
color: white;
}
h2 {
font-family: "Arial" Gadget, sans-serif;
font-weight:bold;
font-size:16px;
color: black;
}
h3 {
font-family: "Arial" Gadget, sans-serif;
font-size:14px;
color: black;
}
/*Main CSS*/
html {
background-color: #white;
}
.noborder {
border-left-style: none !important;
}
.div1 ul li {
float: left;
list-style-type: none;
}
.div1 ul li a {
color: #FFF;
text-decoration: none;
background-color: #36c;
display: block;
height: 10px;
padding: 12px 25px;
text-align: center;
line-height: 10px;
border-left-width: thin;
border-left-style: solid;
border-left-color: #000;
}
.div1 ul li a:hover {
background-color: #609;
}
.leftedge {
border-radius: 8px 0px 0px 8px;
}
.topleft {
border-radius: 8px 0px 0px 0px;
}
.topright {
border-radius: 0px 8px 0px 0px;
}
.bottomleft {
border-radius: 0px 0px 0px 8px;
}
.bottomright {
border-radius: 0px 0px 8px 0px;
}
.rightedge {
border-radius: 0px 8px 8px 0px;
}
.div1 ul ul {
float: none;
display: none;
position: absolute;
top: 30px;
left: 0px;
margin: -1px 0 0px 10px;
padding: 5px 10px 5px 10px;
white-space: nowrap;
}
.div1 ul li:hover ul {
display: block;
color: #FFF !important;
overflow:hidden;
}
.div1 ul ul li {
float: none;
display: inline-block;
padding: 10px;
margin: 0px 0px 0px -10px;
background-color: #FFF;
}
.div1 ul ul li a {
margin: 0 0px 0 0px;
padding: 0px 10px 0px 10px;
font-weight: normal;
-webkit-border-radius: 0;
border-radius: 0;
position: relative;
background-color: #FFF;
color: #609;
font-size: small;
}
.div1 ul li {
position: relative;
}
#container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 80%;
width: 980px;
background: white;
}
#main {
text-align:left;
}
#main p {
text-align:left;
font-size: 16px;
margin-left: 10px;
margin-right: 10px;
}
#main a {
text-align:justify !important;
}
#main p {
text-align:justify !important;
}
#main #leftcol {
float: left;
Width: 300px;
margin-left: 10px;
margin-right: 10px;
text-align: justify !important;
}
#main #leftcol a:hover {
font-weight: 900;
}
#main #rightcol {
float: right;
Width: 300px;
margin-left: 20px;
margin-right: 20px;
text-align:justify;
}
#main #rightcol p {
text-align:justify !important;
}
#main #rightcol a:hover {
font-weight: 900;
}
#main #rightcol2 {
float: right;
Width: 300px;
margin-left: 20px;
margin-right: 20px;
text-align:justify;
}
#main #rightcol p {
text-align:justify !important;
}
#main #rightcol a:hover {
font-weight: 900;
}
#footer {
background-color: #36c;
height: 40px;
clear: both;
font-size: small;
display: block;
line-height: 40px;
text-align: left;
vertical-align: middle;
padding-left: 10px;
color: #FFF;
}
#footer2 {
background-color: #609;
width: 980px;
height: 160px;
clear: both;
display: block;
text-align: center;
color: #FFF;
font-size: small;
padding-top: 10px;
}
#footer2 ul {
text-align: left;
height: auto;
float: left;
}
#footer2 ul li {
list-style: none;
padding: 5px;
margin-right: 30px;
}
#footer2 ul li a {
text-decoration: none;
color: #FFF;
padding: 0px 8px 8px 8px;
}
#footer2 ul li a:hover {
text-decoration: underline;
}
#container #footer3 {
font-size: small;
color: #666;
}