如何在html中创建特定的布局？

我想在html中创建特定的布局，但有一些困难。如何在html中创建特定的布局？

图像相比，是容易话说明白，所以这里是我：

enter image description here

这是好的，但只要DIV1得到heigher，我都会有这样的：

enter image description here

而我的目标是有这样的事情：

enter image description here

目前，我使用div，这可能不是个好主意。欢迎任何帮助。非常感谢您提前。

来源

2013-02-19 Miloš

div嵌套的..？ – 2013-02-19 09:44:21

我已经尝试创建3个div，这是给我的第二个图像结果。然后我尝试使用简单的标签而不是第三个div，结果仍然相同。 – 2013-02-19 09:45:12

@Mr_Green，对不起？ – 2013-02-19 09:45:32

Divs是一个很好的方式来做到这一点。您可以在两个右侧div上使用包含div的浮动布局。下面是一些代码向你展示我的意思：

HTML

<div id="wrapper" class="clearfix"> 
    <div id="sidebar"></div> 
    <div id="main_content"> 
     <div id="top_right"></div> 
     <div id="bottom_right"></div> 
    </div> 
</div>

CSS

#wrapper { background: #44BBF0; } 
#sidebar { float: left; width: 100px; height: 500px; background: #485F40; } 
#main_content { float: right; } 
#top_right { width: 200px; height: 200px; background: #FF553F; } 
#botom_right { width: 200px; height: 300px; background: #B0DE91; } 

.clearfix:before, 
.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    overflow: hidden; 
} 

.clearfix:after { 
    clear: both; 
} 

.clearfix { 
    zoom: 1; /* IE < 8 */ 
}

下面是一个JS拨弄链接，告诉你它的外观：http://jsfiddle.net/ddxYB/

确保清除包装div。因为它只包含浮动元素，所以如果没有，它将没有高度。在我使用的例子中，我设置了高度来节省时间，但是如果使用自动高度并让div接受内容的高度，那么这也是一样。

这是从的jsfiddle代码截图：

This is a screenshot from the JSFiddle code

来源

2013-02-19 09:56:42 Hendeca

完美，这就是我一直在寻找的。 – 2013-02-19 10:45:30

我遇到了一个问题，你能否帮我一下。在JSFiddle中设置时：'#sidebar {float：left;宽度：100px; height：50px;背景：＃485F40; }'那么蓝色div就在橙色div的左边，它应该在橙色div的底部。 – 2013-02-19 11:04:39

@Milos哎呀！我的错误，我在CSS中有一个错字！我不小心将#right_bottom拼写为#right_botom。这里是固定的jsFiddle：http://jsfiddle.net/ddxYB/4/ – Hendeca 2013-02-19 11:51:41

-3

将每个div的CSS位置设置为绝对值，并使用margin来定位它们。

#divName { 
position: absolute; 
margin: 10px 10px 10px 10px; //position them wherever you want. 
}

来源

2013-02-19 09:47:12 crimsoniris

绝对位置不是开始的好方法。 – jjj 2013-02-19 09:55:15

首先，你必须了解容器的概念。

为列创建2个容器：

含有A左栏DIV1
含有DIV2和DIV3

所以对于HTML右列创建结构像这样：

<div class="col1"> 
    <div>div 1</div> 
</div> 

<div class="col2"> 
    <div>div 2</div> 
    <div>div 3</div> 
</div>

和定位柱与CSS：

div.col1 { 
    float: left; 
    width: 200px; 
} 

div.col2 { 
    float: left; 
    width: 400px; 
}

来源

2013-02-19 10:03:55 jjj

这是nt工作来获得像图1所述的东西。屏幕的左侧将是空白的。 – 2013-02-19 11:13:03

这不是最终结果，而是解释div容器（列）的使用。重要的一步。 – jjj 2013-02-19 11:16:22

好的，对不起。你有什么想法如何实现我的目标？ – 2013-02-19 11:18:55

如何在html中创建特定的布局？

回答

相关问题