我对 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 ;
}
`
最佳答案
将它们的 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>关于html - 无法让我的两个 div 并排 float ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42456741/