如何将两个div放入下一个div [英] How to place two divs to the next one

问题描述

如何在图片中放置两个div，如下图所示。

替代文字http://img223.imageshack.us/img223/149/59524904qd1.png

所有你需要做的就是将两个div浮动到左边并应用所需的样式来实现图像中的一个（我只是做了类似的事情，唯一匹配的东西就是颜色）。如果你将一个浮动到每一边，那么如果窗口大小改变，除非它们位于一个容器内，否则你不能控制它们的分离，这就是为什么我想浮动到同一边并选择一个边距。这只是个人偏好，并不意味着以任何其他方式做这件事都会更好。

 < style> 
 .floatOne {
 float：left; 
 margin-right：10px; 
背景颜色：＃ff6464; 
 height：300px; 
 width：80px; 
} 
 
 .floatTwo {
 float：left; 
 margin-right：10px; 
背景颜色：＃6485ff; 
 height：300px; 
 width：200px; 
} 
< / style> 
 
< div class ='floatOne'>一些文字< / div> 
< div class ='floatTwo'>一些文字< / div> 
  

以下是我的代码输出：

浮动div http://img532.imageshack.us/img532/4254/stackh.jpg

How can I place two divs the next one like this one in the Image.

alt text http://img223.imageshack.us/img223/149/59524904qd1.png

解决方案

All you need to do is float both divs to the left and apply the needed styles to achieve the one in the image (I just did something similar, the only thing that matches exactly are the colours). If you float one to each side you will not control the separation of those if the window size changes unless they're inside a container, that's why I like to float both to the same side and select a margin. This is just personal preferences not implying it's better that any other way of doing it.

<style>
.floatOne{
     float:left;
     margin-right:10px;
     background-color:#ff6464;
     height:300px;
     width:80px;
     }

.floatTwo{
     float:left;
     margin-right:10px;
     background-color:#6485ff;
     height:300px;
     width:200px;
     }
</style>

<div class='floatOne'>Some text</div>
<div class='floatTwo'>Some text</div>

Here's the output from my code:

floating divs http://img532.imageshack.us/img532/4254/stackh.jpg

这篇关于如何将两个div放入下一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！