如何把一个div放在左边，两个div放在它的右边

问题描述

我有一个非常经典的布局，我经常做到，而且我总是在即兴创作。我把图片上的三个div分开（红线）。我的问题始终是右下角：即使我修正了左侧Div的大小，我将顶部div作为float：right。我仍然必须为存在问题的div作弊，并利用负边距进行游戏。

在这个例子中，这很容易，因为两个div（左和顶）具有固定大小，但我想有一个响应式灵活布局模式。

我已经搜索了网页，它接近每个人都有他自己的解决方案，但我不是找到任何清晰干净的美味解决方案。

有什么想法？
$ b

预期的行为是：

1. 没有固定大小，实际上根本没有大小（让元素占据他们需要的位置）
   
2. 如果存在空间留在右边，不要去换新路线。
   
3. 如果没有更多空间，跳到新行，但完全向左（如 display：inline-block ）

以下是一个jsfiddle示例：

即使存在（ id ='2'），它会跳到一个新行（因为 display：inline-block 会尝试将该div附加到 id ='2'的右侧，当它找不到时，它会转到一个新行，而不是转到在 id ='1'的右边）

我知道有js网格来做

但是我不想拖拽任何东西，只是一个简单的适应性布局

解决方案

一个快速的方法来做到这一点使用列布局。

您可以将两个部分放在它们自己的div中：

HTML

 < div class =container> 
< div class =column> 
< div class =content one> 
< / div> 
< / div> 
< div class =column> 
< div class =content two> 
< / div> 
< div class =content two alt> 
< / div> 
< / div> 
< / div> 
  

CSS

  .column {
 float：left; 
} 
 .content {
 width：100px; 
} 
 .content.one {
 height：200px; 
背景：红色; 
} 
 .content.two {
 height：100px; 
背景：蓝色; 
} 
 .content.two.alt {
 background：green; 
} 
  

I have a very classical layout I achieve quite often, and I'm always improvising on how I can do it. I separated the three divs on the picture (red lines). My issue is always with the right bottom one: even if I fix the size of the left Div, I put the top div as float:right. I still have to cheat for the problematic div and play with negative margins.

For this example, it is quite easy since the two divs (left and top) have fixed sizes, but I'd like to have a pattern for responsive flexible layouts.

I already searched the web, it seams each person has his own solution, but I'm not finding any clear clean tasty solution.

any ideas?

The expected behavior is :

1. no fixed sizes, actually, no sizing at all (let the elements take the place they need)
2. if there is space left on the right, don't go to a new line.
3. if there is no more space, jump to a new line but go completely to the left (as expected with display:inline-block)

Here is a jsfiddle sample:

even if there is plenty of room (in width) for the div with id='2', it jumps to a new line (because display:inline-block tries to append that div to the right of id='2' and when it doesn't find, it goes to a new line instead of going to the right of id='1')

http://jsfiddle.net/zhamdi/zu5sU/6/

I know there are js grids to to do that likehttp://gridster.net/

But I don't want something to drag and drop, just a simple adaptable layout

解决方案

A quick way to do that is to use a column layout.

You would put both sections in their own containing divs:

JSFiddle Example

HTML

<div class="container">
    <div class="column">
        <div class="content one">
        </div>
    </div>
    <div class="column">
        <div class="content two">
        </div>
        <div class="content two alt">
        </div>
    </div>
</div>

CSS

.column{
    float: left;
}
.content{
    width: 100px;
}
.content.one{
    height: 200px;
    background: red;
}
.content.two{
    height: 100px;
    background:blue;
}
.content.two.alt{
    background:green;
}

这篇关于如何把一个div放在左边，两个div放在它的右边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！