在这个例子中，float: right 似乎不起作用。我理解正确吗？ div #col4 不应该放在第一个框的右侧吗？我如何使用 float 处理它？我做错了什么？
.sivulla {
width: 188px;
box-shadow: 3px 3px 3px #888;
height: 194px;
padding-left: 5px;
margin-bottom: 30px;
border: 2px solid black;
}
#col4 {
width: 200px;
height: 100px;
background-color: #b9b9b9;
opacity: 0.5;
background-image: url(kuva1.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
float: right;
}
#content {
float: right;
}
#col1,
#col2,
#col3,
#col4,
#col5 {
text-align: center;
margin: 20px;
}<!DOCTYPE html>
<html>
<head>
<title>html5 ja css3</title>
<meta charset="utf-8" />
<link href="lopputyylit.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<br>
<div class="sivulla">
<span class="isoteksti">Lorem ipsum </span><br><br>dolor sit amet, <br>consectetuer adipiscing elit,
</div>
<div class="sivulla">
<span class="isoteksti">Lorem ipsum dolor</span><br><br> sit amet, consectetuer <br>adipiscing elit
</div>
<div class="sivulla">
<span class="isoteksti">Lorem ipsum dolor sit amet</span><br><br> consectetuer adipiscing elit, <br>
</div>
<div id="content">
<div id="col4">
TRANSITION
</div>
</div>
</body>
</html>最佳答案
将您的 #col4 元素向上移动到您希望它 float 的位置:到页面顶部。 float 元素将 float 在您放置它们的任何位置(垂直/按照 HTML 元素的顺序/在文档流中)(参见下面的代码片段)。
.sivulla {
width: 188px;
box-shadow: 3px 3px 3px #888;
height: 194px;
padding-left: 5px;
margin-bottom: 30px;
border: 2px solid black;
}
#col4 {
width: 200px;
height: 100px;
background-color: #b9b9b9;
opacity: 0.5;
background-image: url(kuva1.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
float: right;
}
#content {
float: right;
}
#col1,
#col2,
#col3,
#col4,
#col5 {
text-align: center;
margin: 20px;
}<!DOCTYPE html>
<html>
<head>
<title>html5 ja css3</title>
<meta charset="utf-8" />
<link href="lopputyylit.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
<div id="col4">
TRANSITION
</div>
</div>
<br>
<div class="sivulla">
<span class="isoteksti">Lorem ipsum </span><br><br>dolor sit amet, <br>consectetuer adipiscing elit,
</div>
<div class="sivulla">
<span class="isoteksti">Lorem ipsum dolor</span><br><br> sit amet, consectetuer <br>adipiscing elit
</div>
<div class="sivulla">
<span class="isoteksti">Lorem ipsum dolor sit amet</span><br><br> consectetuer adipiscing elit, <br>
</div>
</body>
</html>关于html - 向右浮动不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50661751/