qq_42995607
Rongxin Yang
2020-12-02 17:14
采纳率: 0%
浏览 13

请问如何解决缩放后布局混乱以及sidebar和maincontent两者的冲突问题。

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="Wikipedia Demo.css">
<body>
<head>
	<title>Wikipedia Demo</title>
</head>
<body>
	<div  id="wrap">
	<a href="www.wikipedia/register.com" class="wra1">&nbspRongxin</a>
	&nbsp&nbsp<a href="www.wilipedia.com">Talk</a>
	<a href="www.wilipedia.com">Contributions</a></div>
	<div id="searchbar1"><a>Article&nbsp</a><a id="dark">Talk</a></div><div id="searchbar2"><a>Read&nbsp</a><a id="dark">View source&nbsp&nbsp</a><a id="dark">View history</a>
		<a><input type="text" name="Search" maxlength="200px" value="Search Wikipedia"></a></div>
	<div id="leftbar">
		<P>&nbsp</P>
		<img src="Wikipedia-logo-v2.png" id="logo">
		<dl>
			<p id="content1">Wikipedia</p>
			<p id="quote">The Free Encyclopedia</p>
			<dd>Main Page</dd>
			<dd>Content</dd>
			<dd>Current events</dd>
			<dd>Random article</dd>
			<dd>About Wikipedia</dd>
			<dd>Contract us</dd>
			<dd>Donate</dd>	
		</dl>
		<p class="content2">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspContribute</p>
		<dl>
		<dd>Help</dd>
		<dd>Learn to edit</dd>
		<dd> Community portal</dd>
		<dd>Recent changes</dd>
		<dd>Upload file</dd>	
		</dl>
		</dl>
		<p class="content3">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspTools</p>
		<dl>
		<dd>What links here</dd>
		<dd>Related changes</dd>
		<dd>Special pages</dd>
		<dd>Permanent link</dd>
		<dd>Page information</dd>
		<dd>Cite this page</dd>
		<dd>Wikidata item</dd>	
		</dl>
		<p class="content4">
			&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspLanguages</p>
		<dl>
		<dd>What links here</dd>
		<dd>Related changes</dd>
		<dd>Special pages</dd>
		<dd>Permanent link</dd>
		<dd>Page information</dd>
		<dd>Cite this page</dd>
		<dd>Wikidata item</dd>	
		</dl>
	</div>
</body>
</html>
//css
#wrap{
text-align: right;

}
div a{
	color: blue;
}
#leftbar{
border-right: #A7D7F9 solid 2px;
width: 200px;
height: 10000px;
background-color: #F6F6F6;
margin-top: 5px;
margin-right:0px;
}
#content1{
	font-size: 40px;
	text-align: left;
	margin-bottom: 2px;
	margin-left: 25px;
}
#quote{
	font-size: 15px;
	text-align:center;
	margin-top: 0px;
	text-align: left;
	margin-left: 40px;
}
#leftbar dd{
	color: blue;
	text-align: left;
}
.content2{
	color: grey;
	text-align: left;
}
.content3{
	color: grey;
	text-align: left;
}
#leftbar dd{
color: blue;
	text-align: left;}
#logo{
	align-items: left;
	float: left;
	width: 150px;
	margin-left: 28px;
}
.content4 {
	color: grey;
	text-align: left;
}
#box1{
	color: grey;
}	
#header{
	float: left;
	width: 200px;
	margin-right:5px; 
}
#searchbar1{
	float: left;
	padding: 5px;
	margin-left: 200px;
	overflow: hidden;
	margin-top: 0px;
	margin-top: 4.3px;
	}
#searchbar2{
	float: right;
margin-top: 5.5px;
margin-bottom: 1px;
padding-left:55%;
border-bottom:  solid #A7D7F9 1px;
}
#dark{
	background-color: #E9F3F8;
	border-top: none;
	border-left: solid #A7D7F9 1px;
	border-right: solid #A7D7F9 1px;
	border-bottom: solid #A7D7F9 1px;
}
#maincontent{
	float: left;
	font-size: 50Px;
	text-align: left;
	float: left;
	display:inline;
}
body{
	min-width:22px;
}
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • jackyocheung
    Jacky张 2020-12-02 20:17

    你这个不是很好回答,因为没有你想要的实际效果对比,比如一个UI的图。但是可以给你一个思路:

    1,排出浮动float导致错乱的问题

    2,给容器添加具体宽高调试,可以配合背景颜色或边框。不同的容器给不同的颜色,用来确认位置和所占空间大小,方便调整。

    3,排除兼容性问题,比如高度自动适用,是否没有自动适应内容高度。内容父级容器添加overflow:auto;解决。

    一般这样就可以搞定了,希望对你有用。

    最后建议把代码适当缩进,class命名规范一些;养成好习惯

    点赞 评论

相关推荐