当我将div浮动到右边时,屏幕就会混乱......我已经尝试了清除和其他一些选项[英] When I float the div to the right the screen messes up...I've tried clear and some other options

本文是小编为大家收集整理的关于当我将div浮动到右边时,屏幕就会混乱......我已经尝试了清除和其他一些选项的处理方法,想解了当我将div浮动到右边时,屏幕就会混乱......我已经尝试了清除和其他一些选项的问题怎么解决?当我将div浮动到右边时,屏幕就会混乱......我已经尝试了清除和其他一些选项问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

在浮子方面,我总体上有一个问题.我会在布局上做得很好,但是一旦我开始浮动整个页面就会做奇怪的事情.我认为我需要更好地理解发生的事情的概念.这是我的HTML和CSS的代码.

* {
	margin: 0;
}
#heading {
	background-color: black;
	height: 150px;
}
#navigation {
	background-color: green;
	height: 30px;
}
#leftSide {
	background-color: blue;
	width: 400px;
	height: 700px;
}
#rightSide {
	background-color: red;
	width: 400px;
	height: 700px;
	float: right;
}
#footer {
	background-color: black;
}
<body>
	<div id="wrapper">
	<div id="heading">Heading</div>
	<div id="navigation">Navigation</div>
	<div id="leftSide">Left Side</div>
	<div id="rightSide">Right Side</div>
	<div id="footer">Footer</div>
	<div style="clear: right;"></div>
	</div>
</body>

推荐答案

使用display:inline-block;用于您的ID leftSide

#heading {
	background-color: black;
	height: 150px;
}
#navigation {
	background-color: green;
	height: 30px;
}
#leftSide {
	background-color: blue;
	width: 50%;
	height: 700px;
  display:inline-block;
}
#rightSide {
	background-color: red;
	width: 50%;
	height: 700px;
	float: right;
}
#footer {
	background-color: black;
}
<!DOCTYPE html>
<html>
<head>
	<title>This is it</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="wrapper">
	<div id="heading">Heading</div>
	<div id="navigation">Navigation</div>
	<div id="leftSide">Left Side</div>
	<div id="rightSide">Right Side</div>
	<div id="footer">Footer</div>
	<div style="clear: right;"></div>
	</div>
</body>
</html>

其他推荐答案

Float ing元素创建一个新的block formatting context,因此,如果您期望它在先前的内容以下,则必须在footer之前进行clear.

如果我猜对了,您需要float: left您的leftSide div.

我将您的clear: right div放在页脚上方,并将其成clear: both.

下图:

* {
  margin: 0;
}
#heading {
  background-color: black;
  height: 150px;
}
#navigation {
  background-color: green;
  height: 30px;
}
#leftSide {
  background-color: blue;
  width: 400px;
  height: 700px;
  float: left;
}
#rightSide {
  background-color: red;
  width: 400px;
  height: 700px;
  float: right;
}
#footer {
  background-color: black;
}
<body>
  <div id="wrapper">
    <div id="heading">Heading</div>
    <div id="navigation">Navigation</div>
    <div id="leftSide">Left Side</div>
    <div id="rightSide">Right Side</div>
    <div style="clear: both;"></div>
    <div id="footer">Footer</div>
  </div>
</body>

本文地址:https://www.itbaoku.cn/post/864405.html