Question

看看这个HTML和CSS

<!DOCTYPE html>
<html>
<head>
    <title>Floats</title>
    <style type="text/css">
        .left {
            float:left;
            width:100px;
        }
        .right {
            float:right;
            width:400px;
        }
        body {
            width:500px;
        }
        div {
            outline:solid red 1px;
            padding-bottom: 20px;
        }
        .blue {
            outline-color:blue
        }
        .green {
            outline-color:green;
            height:20px;
        }
    </style>
</head>

<body>
    <div class="left green"></div>
    <div class="right"></div>
    <div class="right"></div>
    <div class="right"></div>
    <div class="right"></div>
    <div class="left blue"></div>
</body>
</html>

绿色框是可变高度的图像红色框是文章组成的块蓝框是相关信息

我想知道如何让蓝框直接出现在绿色框之后，而红色框之间没有空格，但是仍然将蓝框放在HTML的最后？

Answer 1

试试这个

http://jsfiddle.net/ztUt4/8/

<div class="left green">
</div>
<div class="rights">

<div class="right">
</div>

<div class="right">
</div>
<div class="right">
</div>
    </div>
<div class="left blue">
</div>

Answer 2

ok. try this. I modified your code little bit.
**Here is your HTML -** 

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>

  <div class='container'>
    <div class='leftNav'>
       <div class="green"></div>
      <div class="blue"></div>
    </div>

     <div class='rightNav'>
       <div class="right"></div>
       <div class="right"></div>
       <div class="right"></div>
       <div class="right"></div>
       <div class="right"></div>
       <div class="right"></div>
     </div>

  </div><!-- main container closing tag  -->
</div>
</body>
</html>

**Here is your css -**
.container {
  width: 450px;
  height: 300px;
  background: #f2f2f2;
  position: relative;
}
.leftNav {
  width: 120px;
  height: auto;
  float: left;
}
.rightNav {
  width: 320px;
  height: auto;
  float: right;
}
.green {
  border: solid thin green;
  width: 120px;
  height: auto;
  padding-bottom: 135px;
  background: green;
}
.blue {
  border: solid thin blue;
  width: 120px;
  height: auto;
  padding-bottom: 75px;
  background: blue;
}
.right {
  width: 320px;
  height: 45px;
  background: gray;
  margin:3px 0;
}

以下是演示链接： http://jsbin.com/uhazad/1

Answer 3

也检查此解决方案。我将所有4个权利div包含在一个主要div中。

DEMO

HTML

<div class="left green"></div>
<div class="rights">
    <div class="right"></div>
    <div class="right"></div>
    <div class="right"></div>
    <div class="right"></div>
</div>
<div class="left blue"></div>

CSS

.left {
    float:left;
    width:100px;
}
.rights {
    float:right;
    width:400px;
    margin-top:0px
}
body {
    width:500px;
}
div {
    outline:solid red 1px;
    padding-bottom: 20px;
}
.blue {
    outline-color:blue;
    height:10px;
}
.green {
    outline-color:green;
    height:30px;
}

Answer 4

对蓝色分隔符使用position absolute来保持它的父级结尾：

See Demo

CSS：

body {
    width:500px;
}
.main {
    overflow: hidden;
    position: relative;
}
.left {
    float:left;
    width:100px;
}
.right {
    float:right;
    width:400px;
}
.red {
    border:solid red 1px;
}
.green {
    border:solid green 1px;
    height:20px;
}
.blue {
    border:solid blue 1px;    
    position: absolute;
    width:inherit;
    height: 100%;
}

HTML：

<div class="main">
    <div class="left">
        <div class="green">green</div>
        <div class="blue">blue</div>
    </div>
    <div class="right">
        <div class="red">1</div>  
        <div class="red">2</div>
        <div class="red">3</div>
        <div class="red">4</div>
        <div class="red">5</div>
        <div class="red">6</div>
    </div>
</div>

与文章中的布局顺序不同的html

4 个答案: