CSS Divs定位

我试图更好地理解CSS。有人能帮我解决这个问题吗？我有以下HTML：CSS Divs定位

<div class="DivParent"> 
<div class="Div1"></div> 
<div class="Div2"></div> 
</div>

我需要来定位他们这个图上，如图所示： http://i150.photobucket.com/albums/s99/dc2000_bucket/divs_diagram.png

我写了下面的CSS：

.DivParent 
{ 
    border: 1px solid #000000; 
    padding: 0; 
    margin: 0; 
} 
.Div1 
{ 
    border: 4px solid #FF0000; 
    padding: 0; 
    margin: 0; 
    float: left; 
} 
.Div2 
{ 
    border: 4px solid #00FF00; 
    padding: 0; 
    margin: 0 0 0 10px; 
    float: left; 
}

Div1构成应先水平伸展到对。 Div2不应该伸展。它可以被Div1推到右边，直到Div2没有更多的空间去往右边。之后，Div1应该开始向下（或垂直）增长。

上述的工作，如果两个Div不够宽，但然后Div2只是被推到Div1下面。我如何始终将Div2保持在Div1右侧？

来源

2011-11-03 ahmd0

你能做到这一点

给parent div固定width。使用overflow:hidden;遏制divs
变化floats在里面divs到display:inline-block;
设置width在右侧div

左侧div

.DivParent{ 
    border: 1px solid #000000; 
    padding: 0; 
    margin: 0; 
    overflow:hidden; 
    width:550px; 
} 

.Div1{ 
    border: 4px solid #FF0000; 
    padding: 0; 
    margin: 0; 
    max-width:400px; 
    display:inline-block; 
} 

.Div2{ 
    border: 4px solid #00FF00; 
    padding: 0; 
    margin: 0 0 0 10px; 
    width:120px; 
    display:inline-block; 
    vertical-align:top; 
    height:100px; 
}

设置max-width例如：http://jsfiddle.net/P6SJq/

来源

2011-11-03 04:20:29

你的答案假设至少有一个固定的列宽，不知道这是他想要的。 –

是的，这与我想要的非常接近。看起来这两个宽度必须在此解决方案中得到解决。有什么方法不能硬编码Div1和Div2的宽度？ – ahmd0

此外，IE7有内联块的问题，所以这也可能是一个问题。 –

浮动意味着..浮动。不固定。为了防止div2在其中一个div下移动，必须是静态的，可能是左边的一个。但是，这意味着您必须正确地浮动div2（并将其放在div1之前）。那么问题在于div2总是在右侧，即使div1的内容很少。

我不认为有可能做你想要的只给你的HTML。你将不得不使用一些容器div来防止包装。

来源

2011-11-03 04:06:28

好了，我可以很容易地使用

修复它，但一切都结束了，一个人不应该使用表格来定位网络....难道不是吗？ – ahmd0

@ ahmd0 - 不，你不应该使用表格进行布局。我没有说你不能做你想做的，只是你可能需要修改一下html。另外，如果你能适应某些元素的固定尺寸，Jasons的答案可能会奏效。 –

您可以使用display:table属性是这样的：

.DivParent 
{ 
    border: 1px solid #000000; 
    padding: 0; 
    margin: 0; 
    display:table; 
    width:100%; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
} 
.Div1 
{ 
    border: 4px solid #FF0000; 
    padding: 0; 
    margin: 0; 
    display:table-cell; 
} 
.Div2 
{ 
    border: 4px solid #00FF00; 
    width:100px; 
    height:50px; 
}

入住这http://jsfiddle.net/XBZad/2/

编辑

入住这http://jsfiddle.net/bGvAg/2/

这是在每个浏览器的工作。

来源

2011-11-03 04:23:37 sandeep

'display：table'在很多老版本的浏览器中都不起作用，特别是IE6和IE7，并且在老版本的Chrome和FF中“奇怪地”运行。 –

是的，但它的工作，直到IE8 – sandeep

是的，感谢与旧版浏览器不兼容的增加...我们将不做IE浏览器，哈哈））） – ahmd0

结帐这个来源。这对你会有帮助！

.DivParent 
    { 
     border: 1px solid #000000; 
     padding: 0; 
     margin: 0; 
    overflow:hidden; 
    } 
    .Div1 
    { 
     border: 4px solid #FF0000; 
     padding: 0; 
     margin: 0; 
     float:left; 
     min-width:300px; 
     max-width:900px; 
     min-height:100px !important; 
     height:auto; 
     width:auto; 
    } 
    .Div2 
    { 
     border: 4px solid #00FF00; 
     width:150px; 
     height:50px; 
     float:left; 
    }

来源

2011-11-03 04:49:05 DaraSingh

CSS Divs定位

回答

相关问题