问向右浮动不起作用
EN

Stack Overflow用户

提问于 2018-06-03 06:37:34

回答 1查看 185关注 0票数 1

在本例中，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>

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-03 06:58:58

将#col4元素向上移动到您希望它浮动的位置:页面顶部。浮动元素将浮动在您放置它们的任何位置(垂直/按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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50661751

复制

相似问题

问向右浮动不起作用
EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向右浮动不起作用EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向右浮动不起作用
EN