个人中心
gpt4 book ai didi

html - 网页内容未对齐并自动 float 到左上角。如何正确对齐我的元素？

转载 作者：太空宇宙 更新时间：2023-11-04 16:18:30 25 4
gpt4 key购买 nike

对不起，菜鸟源代码，我有很多东西要学习和完善。每当我使用 float: left/right 时，它都会正确对齐。如果我删除每个 div/元素中的 float ，我的所有图像和所有内容都会出于某种原因聚集在容器的左上角。

网页:http://eveo.org/scd/site/

CSS:

body { background: #e9e6e3 url('http://eveo.org/scd/site/images/bg.png') no-repeat center top; 
       margin: 0;
       padding: 0; }

#content { width: 960px; height: 500px; margin: 0 auto; }

# header { height: 76px; width: 960px; }

    .logo { 
        background: url('http://eveo.org/scd/site/images/logo.png'); 
        width: 276px; 
        height: 76px; 
        float: left; 
        } 

    .ad { 
        background: url('http://eveo.org/scd/site/images/ad.png'); 
        width: 641px; 
        height: 76px;
        float: right; 
        } 

# nav_search { 
    height: 98px; 
    width: 960px; 
    }

    .navbar { 
        width: 729px; 
        height: 38px; 
        background-image: 
            -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.29, rgb(0,0,0)),
            color-stop(0.88, rgb(88,88,90))
            );
        background-image: 
            -moz-linear-gradient(
            center bottom,
            rgb(0,0,0) 29%,
            rgb(88,88,90) 88%
            );
            -moz-border-radius: 3px;
            border-radius: 3px;
        margin: 30px 0 30px 0; 
        float: left; 
        }

    .search { 
        background: #FFFFFF;
        width: 214px;
        height: 36px;
            -moz-border-radius: 3px;
             border-radius: 3px;
             -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
             -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
             box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
         float: right; 
         margin: 30px 0 30px 0; 
         border: 1px solid #b9b9b9; 
         }

#news_stream { 
    background: url('http://eveo.org/scd/site/images/news_bg.png');
    width: 960px; 
    height: 232px;
    float:right; 
    }

#events {
    background: url('http://eveo.org/scd/site/images/events.png');
    height: 51px;
    width: 960px;   
    margin: 30px 0 30px 0; 
    float: left; 
    }

/* panels */

#panels { 
    height: 156px; 
    width: 960px; 
    }

    #panels .community { 
        background: url('http://eveo.org/scd/site/images/panel/community.png');
        height: 156px;
        width: 342px;
        float: left; 
        }

    #panels .team_roster { 
        background: url('http://eveo.org/scd/site/images/panel/team_roster.png');
        height: 156px;
        width: 282px;
        float: left; 
        }

    #panels .tournaments { 
        background: url('http://eveo.org/scd/site/images/panel/tournaments.png');
        height: 156px;
        width: 312px;
        float:right;
        }

INDEX.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>

    <title>StarCraftDream.com - Team SCD</title> 
    <!-- STYLESHEETS: grid_layout, stylesheet, fonts, slide, shadowbox --> 
    <link href="css/stylesheet.css" type="text/css" rel="stylesheet" /> 

</head> 

    <body>
    <!-- spacing purposes • will remove later, noob code FTL -->
        <br /><br /><br />
    <!-- spacing purposes -->

        <div id="content">

            <div id="header">
                <div class="logo"></div>
                <div class="ad"></div>
            </div>

            <div id="nav_search">
                <div class="navbar"></div>
                <div class="search"></div>
            </div>

            <div id="news_stream">
            </div>

            <div id="events">
            </div>

            <div id="panels">
                <div class="community"></div>
                <div class="team_roster"></div>
                <div class="tournaments"></div>
            </div>
        </div>

    </body>
</html>

最佳答案

亲爱的先生，您好! float 元素是一件微妙的事情，了解它的工作原理以及元素何时“流入”或“流出”很重要。不知道有什么区别会产生意想不到的结果。

作为基线，尝试尽可能少地 float ，因为它会很快变得困惑。幸运的是，您的布局并不十分复杂(不过看起来不错!)。

你想做什么来强制普通元素在你 float 的元素被清除后出现。您可以通过在需要清除 float 元素的元素上添加属性 clear: [left|right|both] 来分别清除左浮动元素、右浮动元素或两者...我修改了您的布局，所以只有 nessacery元素 float ，其余元素保持流动。

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

    <title>StarCraftDream.com - Team SCD</title> 
    <!-- STYLESHEETS: grid_layout, stylesheet, fonts, slide, shadowbox --> 
    <link href="css/stylesheet.css" type="text/css" rel="stylesheet" /> 

</head> 

    <body>

        <div id="content">

            <div id="header">
                <div class="logo"></div>
                <div class="ad"></div>

                <div class="clearl"></div>
            </div>

            <div id="nav_search">
                <div class="search"></div>
                <div class="navbar"></div>

                <div class="clearr"></div>
            </div>

            <div id="news_stream">
            </div>

            <div id="events">
            </div>

            <div id="panels">
                <div class="community"></div>
                <div class="team_roster"></div>
                <div class="tournaments"></div>

                <div class="clearl"></div>
            </div>
        </div>

    </body>
</html>

至于随之而来的 css:

body { 
    background: #e9e6e3 url('http://eveo.org/scd/site/images/bg.png') no-repeat center top; 
    margin: 0;
    padding: 0;
    overflow-y: scroll; /* IE adds a scrollbar by default, this forces the rest of the browsers to add one too even if no scrolling is required */
}

#content { 
    width: 960px; 
    /*height: 500px; Why set a height when you can let elements expand this block as they which? */
    margin: 0 auto;
    padding: 50px 0; /* content now has whitespace in the top and bottom */
}

#header { 
    /* We don't need to set styles here ;) */
}

    .logo { 
        background: url('http://eveo.org/scd/site/images/logo.png'); 
        width: 276px; 
        height: 76px;
        float: left;
    }

    .ad { 
        background: url('http://eveo.org/scd/site/images/ad.png'); 
        width: 641px; 
        height: 76px;
        float: right;
     }

#nav_search { 
    padding: 30px 0;
}

    .navbar { 
        width: 729px; 
        height: 38px; 

        background-image: 
            -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.29, rgb(0,0,0)),
            color-stop(0.88, rgb(88,88,90))
        );

        background-image: 
            -moz-linear-gradient(
            center bottom,
            rgb(0,0,0) 29%,
            rgb(88,88,90) 88%

        );

        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    .search { 
        background: #FFFFFF;
        width: 214px;
        height: 36px;
            -moz-border-radius: 3px;
             border-radius: 3px;
             -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
             -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
             box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
         float: right; 
         border: 1px solid #b9b9b9; 
    }

#news_stream { 
    background: url('http://eveo.org/scd/site/images/news_bg.png'); 
    height: 232px;
}

#events {
    background: url('http://eveo.org/scd/site/images/events.png');
    height: 51px;  
    margin: 30px 0 30px 0; 
}

/* panels */

#panels { 
    /* We don't need to set styles here ;) */
}

    #panels .community { 
        background: url('http://eveo.org/scd/site/images/panel/community.png');
        height: 156px;
        width: 342px;
        float: left; 
    }

    #panels .team_roster { 
        background: url('http://eveo.org/scd/site/images/panel/team_roster.png');
        height: 156px;
        width: 282px;
        float: left; 
    }

    #panels .tournaments { 
        background: url('http://eveo.org/scd/site/images/panel/tournaments.png');
        height: 156px;
        width: 312px;
        float:right;
    }


.clearl {
    font-size: 0;
    line-height: 0;
    height: 0;
    clear: left;
}

.clearr {
    font-size: 0;
    line-height: 0;
    height: 0;
    clear: right; /* You'll notice I added some extra styles here, this is to make sure IE doesn't force the extra block element to have any sort of layout and messing things up in the process */
}

关于html - 网页内容未对齐并自动 float 到左上角。如何正确对齐我的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7052894/

25 4 0
文章推荐： php - 使用 PHP 从 API 将文件发送回用户的最佳方法
文章推荐： javascript - 如何正确插入 div 以从 jQuery 操作它们？
文章推荐： javascript - UI路由器: deal with nested controllers
文章推荐： c++ - Recursive Decent 解析器 (c++) 的编译问题
太空宇宙
个人简介

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

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