HTML div削减其他div

时间：2017-03-14 10:28:46

标签： html css css3

您好我有一个小网页，我的问题是1 div切断了我的第二个div的一部分：

enter image description here

正如你可以看到3被削减我认为这是一个CSS问题，但我不知道在哪里......

HTML（只是包含2个div的部分）：

＆＃13;
＆＃13; 
* {
  cursor: none !important;
  overflow: hidden;
}
.number {
  height: 60%;
  width: 100%;
  z-index: 2;
  margin: 0;
  padding: 0;
  text-align: center;
}
h1 {
  font-size: 500pt;
  margin: 0;
padding:0  background-color: transparent;
}
p {
  font-size: 70pt;
  margin: 0;
  padding: 0;
}
.names {
  position: relative;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: 0;
  padding: 0;
  background-color: rgba(255,255,255,0);
  width: 400px;
  height: 40%;
  text-align: center;
}
body {
  background-color: black;
  color: white;
  font-family: arial;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.lauftext {
  height: 100%;
  font-size: 70pt;
}
@keyframes marquee {
0% {
text-indent: 100%
}
100% {
text-indent: -100%
}
}
@-webkit-keyframes marquee {
0% {
text-indent: 100%
}
100% {
text-indent: -100%
}
}
.lauftextdiv {
  height: 100%;
}
.lauftext {
  height: 200pt;
  position: absolute;
  font-size: 200pt;
  top: 50%;
  width: 100%;
  margin: auto;
  padding: 2px;
  overflow: hidden;
  white-space: nowrap;
  animation: marquee 7s linear infinite;
  webkit-animation: marquee 7s linear infinite;
}
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
  transform: rotateY(360deg);
}
}
@-o-keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
  transform: rotateY(360deg);
}
}
@-moz-keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
  transform: rotateY(360deg);
}
}
@-webkit-keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
  transform: rotateY(360deg);
}
}
.number_full {
  text-align: center;
  animation: rotate 7s linear infinite;
  -webkit-animation: rotate 7s linear infinite;
  -o-animation: rotate 7s linear infinite;
  -moz-animation: rotate 7s linear infinite;
}
.number_full h1 {
  text-shadow: 0 0 100px #777;
  transform: rotateX(20deg);
  padding: 100px;
  font-size: 600pt;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name=viewport content="width=device-width" , inital-scale=1.0>
  <link rel="stylesheet" href="../layouts/style.css">
  <script src="../reload.js"></script>
  <title>3</title>
</head>
<body>
  <div class="number">
    <h1>3</h1>
  </div>
  <div class="names"> Marc
    ... 
  </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

我猜您应该向position添加.number属性。并尝试删除height属性，或将其设置为100%。

.number {
  position: relative;
  z-index: 2;

  height: 60%;
  width: 100%;

  margin: 0;
  padding: 0;

  text-align: center;
}


* {
  cursor: none !important;
  overflow: hidden;
}

.number {
  width: 100%;
  z-index: 2;
  margin: 0;
  padding: 0;
  text-align: center;
}

h1 {
  font-size: 300pt;
  margin:0;
  padding:0
  background-color: transparent;
}

p {
  font-size: 70pt;
  margin: 0;
  padding: 0;
}

.names {
  position: relative;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: 0;
  padding: 0;
  background-color: rgba(255,255,255,0);
  width: 400px;
  height: 40%;
  text-align: center;
}

body {
  background-color: black;
  color: white;
  font-family: arial;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.lauftext {
  height: 100%;
  font-size: 70pt;
}

@keyframes marquee {
	0% { text-indent: 100% }
	100% { text-indent: -100% }
}

@-webkit-keyframes marquee {
 	0% { text-indent: 100% }
 	100% { text-indent: -100% }
}

.lauftextdiv {
	height: 100%;
}

.lauftext {
	height: 200pt;
	position: absolute;
	font-size: 200pt;
	top: 50%;
	width: 100%;
	margin: auto;
	padding: 2px;
	overflow: hidden;
	white-space: nowrap;
    animation: marquee 7s linear infinite;
    webkit-animation: marquee 7s linear infinite;
}

@keyframes rotate {
	from {transform: rotateY(0deg);}
	to {transform: rotateY(360deg);}
}

@-o-keyframes rotate {
	from {transform: rotateY(0deg);}
	to {transform: rotateY(360deg);}
}

@-moz-keyframes rotate {
	from {transform: rotateY(0deg);}
	to {transform: rotateY(360deg);}
}

@-webkit-keyframes rotate {
	from {transform: rotateY(0deg);}
	to {transform: rotateY(360deg);}
}

.number_full {
	text-align: center;
	animation: rotate 7s linear infinite;
	-webkit-animation: rotate 7s linear infinite;
	-o-animation: rotate 7s linear infinite;
	-moz-animation: rotate 7s linear infinite;
}

.number_full h1 {
	text-shadow: 0 0 100px #777;
	transform: rotateX(20deg);
	padding: 100px;
	font-size: 600pt;
}
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name=viewport content="width=device-width" , inital-scale=1.0>
	<link rel="stylesheet" href="../layouts/style.css">
	<script src="../reload.js"></script>
    <title>3</title>
</head>
<body>
<div class="number">
	<h1>3</h1>
</div>
<div class="names">
Marc
...
</div>
</body>
</html>

答案 1 :(得分：0)

您在h1上遗漏了一个结束标记，应该是。

<div class="number">
    <h1>3</h1>
</div>

答案 2 :(得分：0)

该数字不会被另一个div切断，它会被：

切断 
.number {height: 60%;}

将其更改为：

.number {height: 100%;}

这将解决它。如果您需要将高度设置为60％，则必须使用以下方法显示溢出：

.number {height: 60%; overflow:visible;}

答案 3 :(得分：0)

更改CSS的这一部分

溢出：可见; 

* {
    cursor: none !important;
    overflow: visible;
}
相关问题
最新问题