0

看看这个 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 的最后？

4

4 回答 4

1 
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

于 2013-08-02T10:52:58.683 回答
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>
于 2013-08-02T10:27:38.760 回答
0

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

演示

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;
}
于 2013-08-02T10:51:58.193 回答
0

对蓝色分隔线使用绝对位置，以将其保持在其父级的最末端：

看演示

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>
于 2013-08-02T11:11:24.513 回答