如何在html中创建特定的布局？ [英] How to create a specific layout in html?

问题描述

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

图片比字更容易理解，所以这里是我有： p>

>

这很好，但只要div1变大，我就会这样：

我的目标是有类似的东西：

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

解决方案

Div是一个伟大的方法。您可以使用带有包含div的浮动布局在两个右div。

<$ p $

p> < div id =wrapperclass =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;背景：＃485F40; } 
 #main_content {float：right; } 
 #top_right {width：200px; height：200px;背景：＃FF553F; } 
 #botom_right {width：200px; height：300px;背景：＃B0DE91; } 
 
 .clearfix：before，
 .clearfix：after {
 content：。; 
 display：block; 
 height：0; 
 overflow：hidden; 
} 
 
 .clearfix：after {
 clear：both; 
} 
 
 .clearfix {
 zoom：1; / * IE< 8 * / 
} 
  

这里是一个JS fiddle链接， http://jsfiddle.net/ddxYB/

确保清除wrapper div。因为它只包含浮动的元素，如果你没有高度，它将没有高度。在我使用的例子中，我设置高度以节省时间，但是如果你使用自动高度，并让div占据内容的高度，则也是如此。

这是JSFiddle代码的屏幕截图：

的屏幕截图

I would like to create a specific layout in html but have some dificulties.

Images are easier to understand than words, so here is what I have:

This is fine, but as soon as the div1 gets heigher, I will have this:

And my goal is to have something like that:

For the moment, I am using divs, which is probably not the good idea. Any help is welcome. Thank you very much in advance.

解决方案

Divs are a great way to do it. You can use a floated layout with a containing div around the two right divs. Here is some code to show you what I mean:

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 */
}

Here is a JS fiddle link to show you how it looks: http://jsfiddle.net/ddxYB/

Make sure to clear the wrapper div. Because it contains only floated elements, it will have no height if you don't. In the example I used, I set heights to save time, but this would just as well if you used automatic heights and let the divs take on the height of the content.

This is a screenshot from the JSFiddle code:

这篇关于如何在html中创建特定的布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！