Question

我试图让以下布局超过1.5小时，但仍然无法获得正确的解决方案。

如果有任何重复，那么请原谅我提出这个问题。

我希望使用div标签得到如下图所示的布局：

|的 _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ 的__ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ | | | | | | | | | | | | | |的 _ __ _ __ _ __ _ __ _ __ < EM> _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ ___ | | | | | | | | | | | | | | | | | | | | | | | | |的 的 __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ 的__ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ _

我知道如何使用表格标签。

Answer 1

float:left是你的朋友

HTML：

<div id="wrapper">
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
</div>

CSS：

div {
    display: block;
}
#wrapper {
    width: 400px;
    height:400px;
}

#first {
    float:left;
    width: 33%;
    height: 100%;
    background: red;
}

#second {
    float:left;
    width: 67%;
    height: 30%;
    background: green;
}

#third {
    float:left;
    width: 67%;
    height: 70%;
    background: blue;
}

示例：http://jsfiddle.net/Vkmq3/1/

Answer 2

这是确切的JSFiddle或JSBin

将 CSS 设为

#upleft { 
   width:100px; 
   height: 300px; 
   background:red; float:left; 
}

#upright { 
   width:300px; 
   height:200px; 
   background:blue; 
   float:left
}
#below { 
   height:300px; 
   width:400px; 
   background:green 
}

并在 HTML

中

<div id="upleft"></div>
<div id="upright"></div>
<div id="below"></div>

Answer 3

试试这个css和html代码：

CSS：

<style type="text/css">
#left {
  float:left;
  width:27%;
  height: 25em;
  margin:1px .2em 1px 1px;
  border: 2px solid green;
}
#content {
  margin:1px .2em 1px 28%;
}
#cnt1 {
  position;relative;
  margin:.3em 2px;
  height: 10em;
  border: 1px solid blue;
}
#cnt2 {
  position;relative;
  margin:.3em 2px;
  height: 100%;
}
</style>

HTML：

<div id="left">Left side</div>
<div id="content">
  <div id="cnt1">Up</div>
  <div id="cnt2">Down</div>
</div>
<br style="clear:both;" />

使用div标签将页面分为三个部分

3 个答案: