无法让我的两个div并排漂浮
[英]Cannot get my two divs to float side by side
问题描述
我对html还是比较陌生，似乎对所有内容都了解得很好，除了布局是如何工作的。 我想在左侧显示文本，在右侧显示图像，但由于某种原因，左右浮动不起作用>
这是我正在使用的代码：
HTML：
`
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "glitch.css">
<title> Data Bending </title>
</head>
<body>
<header class = "horse" > Glitch Horse </header>
<div class = "textContainer">
<p>
Horses' anatomy enables them to make use of speed to escape predators
and they have a well-developed sense of balance and a strong fight-or- flight
response. Related to this need to flee from predators in the wild is an unusual
trait: horses are able to sleep both standing up and lying down. Female horses,
called mares, carry their young for approximately 11 months, and a young horse,
called a foal, can stand and run shortly following birth. Most domesticated horses
begin training under saddle or in harness between the ages of two and four. They
reach full adult development by age five, and have an average lifespan of between 25
and 30 years.
</p>
<div class = "imageContainer">
<img src="city.png" style = "width: 300px; height:250px" >
</div>
</div>
<input type = "button" name = "button1" value = " View Glitch Horse">
<div class = "padding"></div>
<div class = "padding"> </div>
<div>
</body>
</html>
CSS：
.horse{
background-color: #f3f3f3;
padding-top: 10px;
width: 900px;
text-align: center;
}
.textContainer{
float:left;
width : 75%;
height: 120px;
}
.imageContainer{
float:right;
width:20%;
}
p{
background-color: #fff;
width: 900px;
height: 100px;
float left:
}
.padding{
padding-top: 10px;
padding-bottom: 10px ;
}
`
4 个解决方案
解决方案1
1 2017-02-25 13:39:51
将其float设置为相同的值（向左或向右），并确保其宽度不超过100％。
.left, .right { position:relative; width:20%; height:100px; background-color:red; float:left; } .right { background-color:blue; width:80%; }
<div class="parent"> <div class="left"></div> <div class="right"></div> </div>
解决方案2
0 2017-02-25 13:37:02
您无需在只使用div的两个div上都使用float
.imageContainer{
float:right;
width:20%;
}
解决方案3
0 2017-02-25 13:41:12
尝试这个：
.main-container{width: 100%; float: left;} .horse{ background-color: #f3f3f3; padding-top: 10px; max-width: 900px; width: 100%; text-align: center; } .textContainer{ float:left; width : 75%; height: 120px; } .imageContainer{ float:right; width:20%; } p{ background-color: #fff; width: 900px; height: 100px; float left: } .padding{ padding-top: 10px; padding-bottom: 10px ; }
<!DOCTYPE html> <html> <head> <link rel = "stylesheet" type = "text/css" href = "glitch.css"> <title> Data Bending </title> </head> <body> <div class="main-container"> <header class = "horse" > Glitch Horse </header> <div class = "textContainer"> <p> Horses' anatomy enables them to make use of speed to escape predators and they have a well-developed sense of balance and a strong fight-or- flight response. Related to this need to flee from predators in the wild is an unusual trait: horses are able to sleep both standing up and lying down. Female horses, called mares, carry their young for approximately 11 months, and a young horse, called a foal, can stand and run shortly following birth. Most domesticated horses begin training under saddle or in harness between the ages of two and four. They reach full adult development by age five, and have an average lifespan of between 25 and 30 years.</p> <input type = "button" name = "button1" value = " View Glitch Horse"> </div> <div class = "imageContainer"> <img src="city.png" style = "width: 300px; height:250px" > </div> </div> </body> </html>
解决方案4
0 2017-02-25 13:42:03
由于以下代码段，这里存在问题。
p{
width: 900px;
}
和
<img src="city.png" style = "width: 300px; height:250px" >
浮点效果很好，但是这两行代码覆盖了父级的宽度，因此divs textContainer和imgContainer不能连续显示。
并排浮动两个 Div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.