Question

在此示例中，float: right似乎无法正常工作。我理解正确吗？不应该将div #col4推到第一个盒子的右侧吗？如何使用float来解决问题？我做错了什么？

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

将#col4元素移动到您想要浮动的位置：到页面顶部。浮动元素将浮动在任何地方（垂直/按文档流中的HTML元素/的顺序）放置它们（请参阅下面的代码段）。

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

向右浮动不起作用

1 个答案: