不可能的DIV布局？ [英] Impossible DIV layout?
问题描述
我有一个我似乎无法开展工作的布局。使用浮动：对，我可以
将编号的项目按照需要包围rightdiv。问题是，
这是一个动态列表，而5是一个动态列表。不应该在4之前来在列表中。我还要b&b $ b&b;左边对齐。
所以基本上，我真的希望物品能够左移，但是如果我使用一个
左浮动，那么包裹看起来像垃圾。 " rightdiv"可以有不同的
高度，因此使用固定的保证金不是一种选择。
我想要的甚至可能吗？
< html>
< head>
< style>
#main {width：400px}
#rightdiv，.item span {
保证金：5px;
border：1px solid＃000;
宽度：180px;
}
#rightdiv {
float：right;
身高：150px;
}
..item span {
float：right;
身高：50px;
显示：阻止;
}
< / style>
< / head>
< body>
< div id =" main">
< div id =" rightdiv" ;>< / div>
< div class =" item">< span> 1< / span>< / div>
< ; div class =" item">< span> 2< / span>< / div>
< div class =" item">< span > 3< / span>< / div>
< div class =" item">< span> 4< / span>< / div>
< div class =" item">< span> 5< / span>< / div>
< div class =" item">< span> ; 6< / span>< / div>
< / div>
< / body>
< / html>
2006-10-02，PW< pw @ anonymouswrote：
我有一个我似乎无法开展工作的布局。使用浮动：对，我可以
将编号的项目按照需要包围rightdiv。问题是，
这是一个动态列表，而5是一个动态列表。不应该在4之前来在列表中。我还要b&b $ b&b;左边对齐。
所以基本上，我真的希望物品能够左移，但是如果我使用一个
左浮动，那么包裹看起来像垃圾。 " rightdiv"可以有不同的
高度，因此使用固定的保证金不是一种选择。
我想要的甚至可能吗？
display：inline-block就是这样的，但它不支持
由Firefox（Opera确实支持它）但是。
.item盒子实际上是否需要块盒？另一个
选项可以让你得到你想要的东西
显示：内联。
否则你可以使用一个表并在rightdiv部分设置rowspan。
>< html>
< head>
< style> ;
#main {width：400px}
#rightdiv，.item span {
保证金：5px;
border：1px solid＃000;
宽度：180px;
}
#rightdiv {
浮动：正确;
身高：150px;
}
.item span {
浮动：正确;
身高：50px;
显示：阻止;
}
< / style> ;
< / head>
< body>
< div id =" main">
< div id =" rightdiv">< / div>
< div class =" item">< span> 1< / span>< / div>
< div class =" item">< span> ; 2< / span>< / div>
&l t; div class =" item">< span> 3< / span>< / div>
< div class =" item">< span> 4< / span>< ; / div>
< div class =" item">< span> 5< / span>< / div>
< div class =" item">< span> 6< / span>< / div>
< / div>
< / body>
< / html>
>我有一个我似乎无法工作的布局。使用浮点数：对，I
>可以根据需要将编号项目包装在rightdiv周围;。问题是
这是一个动态列表，而5是一个动态列表。不应该在4之前来在列表中。我还想要6。左边对齐。
所以基本上，我真的希望物品向左浮动，但如果我使用
一个
左浮动，包裹就像垃圾一样。 " rightdiv"可以有不同的高度，所以使用固定的边距不是一个选项。
我想要的甚至可能吗？
显示：内联块就是这样的，但它不支持
由Firefox（Opera确实支持它）然而）。
你是对的......显示：内联块是完美的...如果有
跨浏览器支持。
PW写道：
我有一个我似乎无法制作的布局工作。使用浮动：对，我可以
将编号的项目按照需要包围rightdiv。问题是，
这是一个动态列表，而5是一个动态列表。不应该在4之前来在列表中。我还要b&b $ b&b;左边对齐。
所以基本上，我真的希望物品能够左移，但是如果我使用一个
左浮动，那么包裹看起来像垃圾。 " rightdiv"可以有不同的
高度，因此使用固定的保证金不是一种选择。
Au contraire。试试这个：
< html>
< head>
< style>
#main {position：relative; left：100px; top：100px; width：400p x; padding-top：1px;}
#ItemWrapper {float：left; width：180px; margin：10px ;}
..item {身高：50px;宽度：180px;边距底部：10px;}
#rightdiv {身高：150px;宽度：180px;保证金： 10px 0 0 205px;}
#rightdiv，.item {border：1px solid＃000;}
< / style>
< ; / head>
< body>
< div id =" main">
< div id =" ItemWrapper">
< div class =" item"> 1所有项目1-6都在＃ItemWrapper中。< / div>
< div class =" item"> 2 #ItemWrapper向左浮动。< / div>
< div class =" item"> 3 #main是所有内容的包装器。 ..< / div>
< div class =" item"> 4 ...定位于此需求。< / div>
< div class =" item"> 5 1px的填充适用于#main ...< / div>
< div class =" item" > 6 ...以防止折叠边距。< / div>
< / div>
< div id =" rightdiv">这是#rightdiv并没有浮动，但流向
的权利
#ItemWrapper为＃rightdiv选择左边距为205px。< / div>
< / div>
< / body>
< / html>
I have a layout that I can not seem to make work. Using a float:right, I can
get the numbered items to wrap as desired around "rightdiv". The problem is,
this is a dynamic list, and "5" shouldn''t come before "4" in the list. I
also want "6" to be aligned left.
So basically, I really want the items to be floated left, but if I apply a
left float, the wrapping looks like crap. "rightdiv" can have varying
heights, so using a fixed margin on it is not an option.
Is what I am wanting even possible?
<html>
<head>
<style>
#main {width: 400px}
#rightdiv, .item span{
margin: 5px;
border: 1px solid #000;
width: 180px;
}
#rightdiv {
float:right;
height: 150px;
}
..item span {
float:right;
height:50px;
display: block;
}
</style>
</head>
<body>
<div id="main">
<div id="rightdiv"></div>
<div class="item"><span>1</span></div>
<div class="item"><span>2</span></div>
<div class="item"><span>3</span></div>
<div class="item"><span>4</span></div>
<div class="item"><span>5</span></div>
<div class="item"><span>6</span></div>
</div>
</body>
</html>
On 2006-10-02, PW <pw@anonymouswrote:I have a layout that I can not seem to make work. Using a float:right, I can
get the numbered items to wrap as desired around "rightdiv". The problem is,
this is a dynamic list, and "5" shouldn''t come before "4" in the list. I
also want "6" to be aligned left.
So basically, I really want the items to be floated left, but if I apply a
left float, the wrapping looks like crap. "rightdiv" can have varying
heights, so using a fixed margin on it is not an option.
Is what I am wanting even possible?display: inline-block is just the thing for this, but it isn''t supported
by Firefox (Opera does support it however).
Do the .item boxes actually need to be block boxes though? The other
option to get something close to what you might want is to make them
display: inline.
Otherwise you could use a table and set a rowspan on the rightdiv part.
><html>
<head>
<style>
#main {width: 400px}
#rightdiv, .item span{
margin: 5px;
border: 1px solid #000;
width: 180px;
}
#rightdiv {
float:right;
height: 150px;
}
.item span {
float:right;
height:50px;
display: block;
}
</style>
</head>
<body>
<div id="main">
<div id="rightdiv"></div>
<div class="item"><span>1</span></div>
<div class="item"><span>2</span></div>
<div class="item"><span>3</span></div>
<div class="item"><span>4</span></div>
<div class="item"><span>5</span></div>
<div class="item"><span>6</span></div>
</div>
</body>
</html>
>I have a layout that I can not seem to make work. Using a float:right, I>can
get the numbered items to wrap as desired around "rightdiv". The problem
is,
this is a dynamic list, and "5" shouldn''t come before "4" in the list. I
also want "6" to be aligned left.
So basically, I really want the items to be floated left, but if I apply
a
left float, the wrapping looks like crap. "rightdiv" can have varying
heights, so using a fixed margin on it is not an option.
Is what I am wanting even possible?
display: inline-block is just the thing for this, but it isn''t supported
by Firefox (Opera does support it however).You''re right... display: inline-block would be perfect... if there was
cross-browser support.
PW wrote:I have a layout that I can not seem to make work. Using a float:right, I can
get the numbered items to wrap as desired around "rightdiv". The problem is,
this is a dynamic list, and "5" shouldn''t come before "4" in the list. I
also want "6" to be aligned left.
So basically, I really want the items to be floated left, but if I apply a
left float, the wrapping looks like crap. "rightdiv" can have varying
heights, so using a fixed margin on it is not an option.Au contraire. Try this:
<html>
<head>
<style>
#main {position:relative;left:100px;top:100px;width:400p x;padding-top:1px;}
#ItemWrapper {float:left;width:180px;margin:10px;}
..item {height:50px;width: 180px;margin-bottom:10px;}
#rightdiv {height: 150px;width: 180px;margin:10px 0 0 205px;}
#rightdiv, .item {border: 1px solid #000;}
</style>
</head>
<body>
<div id="main">
<div id="ItemWrapper">
<div class="item">1 All items 1-6 are in #ItemWrapper.</div>
<div class="item">2 #ItemWrapper is floated left.</div>
<div class="item">3 #main is the wrapper for everything and is ...</div>
<div class="item">4 ... positioned in anticipation for this need.</div>
<div class="item">5 A padding of 1px is applied to #main ...</div>
<div class="item">6 ... to prevent collapsing margins.</div>
</div>
<div id="rightdiv">This is #rightdiv and is not floated, but flows to
the right of
#ItemWrapper with a chosen left-margin of 205px for #rightdiv.</div>
</div>
</body>
</html>
这篇关于不可能的DIV布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
