Question

我有以下对齐问题：我想要＆＃34;随机＆＃34; div在窗口中有一个全宽，这就是为什么我添加＆＃34;宽度：100％＆＃34;命令。但由于某种原因，它显示随机div的最大宽度是＆＃34; fixedwidth＆＃34;的宽度。 div，但两者没有连接。为什么浏览器会保持匹配两个div的最大宽度？如果我增加＆＃34; fixedwitdth＆＃34;的宽度div，然后＆＃34;随机div＆＃34;的宽度也增加了。但这没有任何意义。

<html>
<head>
<title>Gliga's BBC</title>
<style type="text/css">

body {
    margin:0px;
    font-family: arial,helvetica;
}

#topbar {
    background-color:#7A0000;
    width:100%;
    height:40px;
    color:white;

}

.fixedwidth {
    width:1200px;
    background-color:green;
    margin:0 auto;
}

#logodiv {

    padding-top:7px;
    padding-bottom:3px;
    padding-left:50px;
    float:left;
    border-right: 2px solid #990000;
    padding-right:30px;
}

#signindiv {
    font-weight:bold;
    padding:9px 80px 11px 20px;
    font-size:0.9 em;
    float:left;
    border-right: 2px solid #990000;


}

#topmenudiv {
    float:left;
}

#topmenudiv ul {
    margin:0;
    padding:0;
}
#topmenudiv li {
    list-style:none;
    font-weight:bold;
    font-size:0.9 em;
    border-right: 2px solid #990000;
    height:100%;
    padding:10px 20px 10px 20px;
    float:left;
}

#searchdiv { 
    float:left;
    padding:6px 10px 5px; 5px;
    border-right: 2px solid #990000;
}

#searchdiv input{ 
    height:20px;
}

.break {
    clear: both;

}



.random {
    background-color:blue;
    margin-top:10px;
    height:30px;
    width:100%;

}
</style>
</head>

<body>

<div id="container">

<div id="topbar">

    <div class="fixedwidth">

        <div id="logodiv">
            <img src="images/bbclogo.png"/>
        </div>

        <div id="signindiv">
                                   Sign in
        </div>

        <div id="topmenudiv">
                                  <ul>
                                  <li>News</li>
                                  <li>Sport</li> 
                                  <li>Weather</li>
                                  <li>iPLayer</li>
                                  <li>TV</li>
                                  <li>Radio</li>
                                  <li>More...</li>
        </li>
            </ul>
        </div>

        <div id="searchdiv">
            <input type="text" placeholder="Search..." />

        <div>



    </div>


</div>

<div class="break" />

<div class="random">

</div>


</div>




</body>
</html>

Answer 1

.random是.fixedwidth的孩子，所以这是一种完全正常的行为。

如果您正确排序代码，那么您可以清楚地看到它：

enter image description here

Div没有正确对齐

1 个答案: