gpt4 book ai didi

css - Div 未正确对齐

转载 作者:太空宇宙 更新时间:2023-11-04 03:39:37 27 4
gpt4 key购买 nike

我有以下对齐问题:我希望“随机”div 在窗口中具有全宽,这就是我添加“width:100%”命令的原因。但是由于某种原因,它显示随机div的最大宽度是“固定宽度”div的宽度,但两者没有连接。为什么浏览器一直匹配两个div的最大宽度?如果我增加“fixedwitdth”div 的宽度,那么“random div”的宽度也会增加。但这没有任何意义。

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

最佳答案

.random.fixedwidth 的子级,所以这是一个完全正常的行为。

如果您正确地对代码进行排序,那么您会清楚地看到它:

enter image description here

关于css - Div 未正确对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25105895/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com