html css 布局的问题_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 09:47:24
Original
1143 Leute haben es durchsucht

html css

看下面的html css 。
1,  id="right"的div 为什么顶部没有和id="left"的div顶部对齐?
2, 我想让id="center"的div占据parent div里除left div和right div 以外的空间(如下图所示),怎么做?











left


center


right






回复讨论(解决方案)

如下图所示:


right被center的位置影响到了,你在center的css里面加个position:relative;可以解决。

<html><head><style type="text/css">body div{margin: 0;padding; 0;}#parent{margin: 0 auto;padding : 0;width : 500px;height : 500px;outline: solid blue;position : relative;}#left{float: left;width : 150px;height: 150px;outline:solid red;}#right{float: right;top: 0;width : 150px;height: 150px;outline:solid yellow;}#center{float: left;outline: solid;margin-left:5px;height:230px;width:190px;}.clear{clear: both black;}</style></head><body><div id="parent"><div id="left">left</div><div id="center">center</div>	<div id="right">right</div>	<div class="clear"/></div></body></html>
Nach dem Login kopieren

你没看明白我的问题

第一个问题,元素的浮动是按顺序排的,如果中间没有center的话right块就会上去,和left对其,因为有center占据了两者中间的位置,而且是跟大容器宽度一样的,导致了right无法跟排在center的右侧,也就是换行了。
第二个问题

#leftpage,#centerpage,#rightpage{height:500px; border:none;}#leftpage{width:150px;float:left;background:blue;margin:-500px 0 0 0;overflow:inherit;}#centerpage{width:inherit;background:#fff;margin:0;padding:0 200px 0 150px;overflow:auto;}#rightpage{width:200px;float:right;background:blue;margin:-500px 0 0 0;overflow:inherit;}
Nach dem Login kopieren

<div id="centerpage"><a href="#">中间内容中间内容中间</a>内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容容中间容中间内<a href="#">容中间内容中间内容中间内</a>容中间内容中间内容</div><div id="rightpage">右侧内容</div><div id="leftpage">左侧内容</div>
Nach dem Login kopieren

<div id="parent">    <div id="left" style="width: 20%">    left    </div>    <div id="right" style="width: 60%">    right    </div>    <div id="center" style="width: **%">    center    </div>	    	</div>
Nach dem Login kopieren

我先写left 和right 在写center 剩余空间的具体表达忘记了 你可以搜下

center都把right的位置给占了,怎么对齐?right和center的div的顺序变一下就行了。

<div id="left">left</div><div id="right">right</div><div id="center">center</div>
Nach dem Login kopieren






left


center


//此处定义center的margin-left的宽度是左边宽度的实际宽度+边框宽度+自身边框宽度,margin-right的宽度是右边宽度的实际宽度+边框宽度+自身边框宽度,高度应与父窗口高度合适

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"> body div{ margin: 0; padding; 0; }.clearfix:after{ height:0; clear:both; content:""; visibility:hidden; display:block;} #parent{ margin: 0 auto; padding : 0; width : 500px; height : 500px; outline: solid blue; position : relative; } #left{ float: left; width : 150px; height: 150px; outline:solid red; } #right{ float: right; top: 0; width : 150px; height: 150px; outline:solid yellow; } #center{ outline: solid; margin:0 156px; height:150px; } .centerOut{ margin-left:156px;} </style></head><body><div id="parent" class="clearfix">	<div id="left">left</div>			<div id="right">right</div> 		<div id="center">center</div> 	</div></body></html>
Nach dem Login kopieren

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage