Question

我似乎无法在css中使用最简单的东西。我确信它很简单，但我一直在与浮动/位置/清除作斗争，我无法得到任何看起来像下面的东西。我会发布一个JSFiddle但是没有意义，因为我无法接近它！

css goal

左侧的绿色位显示在黄色容器内。我根本不想要黄色容器，但是我在那里展示了它，因为我不确定如果没有黄色容器，我就不会有它。

非常感谢。

Answer 1

我真的很努力，我看到了;）

首先布置框架以使左右区域在右侧填充顶部，中间和底部元素：

<div id="left">
    <div id="box">weird box thing</div>
</div>
<div id="right">
    <div id="top">header</div>
    <div id="middle">main</div>
    <div id="bottom">footer</div>
</div>

然后相应地设置它们，确保body为100％。

html, body {
    margin:0; padding:0;
    height:100%;
    width:100%;
    min-width:100%;
    background-color: Cornsilk;
}
#left, #right {
    position:relative;
    margin:0; padding:0;
    height:100%;
    min-height:100%;
    display:block;
    float:left;
}
#left {width:20%;}
#right {width:80%;}
#top {
    height:20%;
    background-color: Chocolate;
}
#middle {
    height:60%;
    background-color: CornflowerBlue;
}
#bottom {
    height:20%;
    background-color: Crimson;
}
#box {
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    margin:auto;
    width:80%; height:30%; 
    background:GreenYellow;
}

见本演示：http://jsfiddle.net/dDSFZ/

Answer 2

你可能只是在思考它......这实际上是一个非常简单的布局。请注意，如果没有内容，则不会显示任何内容（因为div是空的），因此您应该为练习指定高度，但很少在生产中。

<!DOCTYPE html>
<html>
 <!--head and stuff-->
  <body>
    <div id="left">
      <div class="green"></div>
    </div>
    <div id="right">
      <div class="brown"></div>
      <div class="blue"></div>
      <div class="red"></div>
    </div>
  </body>
</html>

CSS：

#left { width: 20%; float: left; display:inline-block; position: relative; }
#right { width: 80%; display: inline-block; position: relative; }
.green { 
  position: absolute; 
  height: 100px; /*or something*/ 
  width: 100%;
  background-color: green;
  top: 20%; /*or something*/
  }
.brown, .blue, .red { position: relative; display: inline-block; float:left; }
.brown {background-color: brown; height: 10%; width: 100% /*or something*/
.blue {background-color: blue; height: 80%; width: 100% /*or something*/
.red {background-color: red; height: 10%; width: 100% /*or something*/

同样，作为一般规则，我不建议在div上设置一个固定的高度（特别是px变种），但是由于div中没有内容，所以为了演示的缘故。当你开始添加边框，边距和填充时，事情会变得复杂一些，因为它们增加了框的大小，如果它超过100％，那么东西开始破坏。把它放在一个小提琴中并稍微玩一下：）

Answer 3

好的，你得到了我的另一个解决方案，它是一个面向列表的布局（现在高度是静态的，但你可以很容易地将代码修改为百分比和100％高度）：

HTML：

<ul class="cols">
    <li>
        <div class="greenbox"></div>
    </li>
    <li>
        <ul class="rows">
            <li class="first"></li>
            <li class="second"></li>
            <li class="third"></li>
        </ul>
    </li>
</ul>

CSS：

html, body {
    width: 100%;
    padding: 0;
    margin: 0;
}

body > ul.cols > li {
    list-style: none;
    height: 500px;
    float: left;
    width: 80%;
}

body > ul.cols > li:first-child {
    width: 20%;
    background: #E6E699;
}

    ul.rows {
        padding: 0;
    }

    ul.rows > li {
        list-style: none;
        width: 100%;
    }

        ul.rows > li.first {
            background: #C5A188;
            height: 100px;
        }

        ul.rows > li.second {
            background: #5AA3FF;
            height: 300px;
        }

        ul.rows > li.third {
            background: #F00;
            height: 100px;
        }

div.greenbox {
    width: 80%;
    height: 200px;
    background: #A6E71A;
    position: relative;
    top: 50%;
    margin: -100px auto 0 auto;
}

http://jsfiddle.net/JXaqt/

需要一些基本的CSS指导

3 个答案: