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

请问如何解决缩放后布局混乱以及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条回答 默认 最新

  • Jacky张 2020-12-02 20:17
    关注

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

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

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

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

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

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

    评论

报告相同问题？

  • 【面试题系列|前端面试题】前端高频面试题总结（2021年最新版）
    2020-12-23 17:51
    麦田上的字节的博客 面试过不少前端从业者，简历写的平平淡淡，别人会的技能他也都会，看起来什么都掌握一些；有些会请过来当面聊一下，有些就直接拒绝了（如果是公司内要求独立完成项目的岗位，简历里放很多学习时候的DEMO项目，没有...
  • HTML5andCSS3面试题大全
    2021-03-08 12:48
    星霜下逆天生的博客 （* ）(2)Style 标签写在 body 后和 body 前有什么区别？(3)什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC2.CSS选择器(1) CSS选择器种类(2)CSS选择器的优先级3.CSS伪类和伪元素4.CSS盒模型4.有哪些方式...
  • HTML、css基础知识
    2019-06-05 19:33
    斯昂的博客 前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通过样式规则给标签添加简单的样式 1.HTML的局限性 说起HTML，这其实是个非常单纯的家伙， ...
  • 没有解决我的问题, 去提问