个人中心
gpt4 book ai didi

html - 3 列 div 布局不适合我

转载 作者：行者123 更新时间：2023-11-28 08:24:13 25 4
gpt4 key购买 nike

我正在尝试做三个简单的专栏，但我没有任何运气。

在过去的 2 小时里，我进行了一些搜索并尝试了不同的方法，但没有任何效果......

我想我遗漏了一些非常简单的东西……请帮助并提前致谢!

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

  <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">&nbsp;HOME&nbsp;</a></li>
        <li><a href="about.html">&nbsp;ABOUT US&nbsp;</a></li>
        <li><a href="get-involved.html">&nbsp;&nbsp;GET INVOLVED&nbsp;&nbsp;</a></li>
        <li><a href="employment.html">&nbsp;EMPLOYMENT OPPORTUNITIES&nbsp;&nbsp;</a></li> 
        <li><li><a href="contact.html">&nbsp;CONTACT&nbsp;</a></li>
        <li><li><a href="https://gator4062.hostgator.com:2083/" class="rightedge">&nbsp;&nbsp;LOGIN&nbsp;&nbsp;</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>&nbsp;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>&nbsp;to become a sponsor now!</a>
<br />
<br /> 
<font style="font-weight:bold">Download:&nbsp;&nbsp;</font><a href="images/RSCF Brochure 2014.pdf"><font color="#0000FF">Sponsorship Brochure</font></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#"><font color="#0000FF">Sponsorship Form</font></a>
<br /> 
<font color="#FFFFFF">Download:&nbsp;&nbsp;&nbsp;<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>&nbsp;to donate now!</a>
<br />
<br /> 
<font style="font-weight:bold">Download:&nbsp;&nbsp;</font><a href="images/RSCF Brochure 2014.pdf"><font color="#0000FF">Donation Brochure</font></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#"><font color="#0000FF">Donation Form</font></a>
<br /> 
<font color="#FFFFFF">Download:&nbsp;&nbsp;&nbsp;<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>&nbsp;to donate now!</a>
<br />
<br /> 
<font style="font-weight:bold">Download:&nbsp;&nbsp;</font><a href="images/RSCF Brochure 2014.pdf"><font color="#0000FF">Donation Brochure</font></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#"><font color="#0000FF">Donation Form</font></a>
<br /> 
<font color="#FFFFFF">Download:&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="privacy-policy.html">Privacy Policy</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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 &nbsp;US</a></font></li>
        <li>&nbsp;&nbsp;Our Mission and Vision</li>
        <li>&nbsp;&nbsp;Our People</li>
        <li>&nbsp;&nbsp;Our Outreach and Programs</li>
        <li>&nbsp;&nbsp;Our Community Partners</li>
    </ul>
    <ul>
                <li><font style="font-weight:900"><a href="get-involved.html">GET &nbsp;INVOLVED</a></font></li>

        <li>&nbsp;&nbsp;Become A Volunteer</li>
        <li>&nbsp;&nbsp;Become A Sponsor</li>
        <li>&nbsp;&nbsp;Become A Community Partner</li>
        <li>&nbsp;&nbsp;Donate Today</li>
    </ul>
    <ul>
                <li><font style="font-weight:900"><a href="employment.html">EMPLOYMENT &nbsp;OPPORTUNITIES</a></font></li>
        <li>&nbsp;&nbsp;Volunteer</li>
        <li>&nbsp;&nbsp;Part-time</li>
        <li>&nbsp;&nbsp;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>

CSS:

@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;
}

最佳答案

您的代码看起来非常复杂，无法尝试进行故障排除。我建议从准系统(3 个 float div)开始，然后从那里开始工作。此外，我注意到您的全部内容代码都在您的 head 标签中，而不是在您的 body 标签中。在打开 body 标签之前关闭 head 标签，看看是否有帮助(不确定您的具体错误是什么)。

关于html - 3 列 div 布局不适合我，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28602643/

25 4 0
文章推荐： jquery - 想在我选中复选框后禁用整个类(class)
文章推荐： c++ - 在派生类对象中使用派生类构造函数与基类类型兼容
文章推荐： javascript - 动画 HTML、CSS JavaScript。我怎样才能实现这个
文章推荐： javascript - 在桌面 View 中的 iframe 中加载网站
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com