Questions tagged «css-float»

使用CSS float属性将元素定位在其容器的左侧或右侧。

18
如何在另一个div内对齐3个div（左/中/右）？
我想在容器div中对齐3个div，如下所示： [[LEFT] [CENTER] [RIGHT]] 容器div的宽度为100％（未设置宽度），调整容器大小后，居中div应该保持居中。 所以我设置： #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} 但它变成： [[LEFT] [CENTER] ] [RIGHT] 有小费吗？
12
如何居中浮动元素？
我正在实现分页，它需要居中。问题在于链接需要显示为块，因此它们需要浮动。但是，那text-align: center;对它们不起作用。我可以通过给左边的wrapper div填充来实现，但是每个页面都有不同数量的页面，所以这是行不通的。这是我的代码： .pagination { text-align: center; } .pagination a { display: block; width: 30px; height: 30px; float: left; margin-left: 3px; background: url(/images/structure/pagination-button.png); } .pagination a.last { width: 90px; background: url(/images/structure/pagination-button-last.png); } .pagination a.first { width: 60px; background: url(/images/structure/pagination-button-first.png); } <div class='pagination'> <a class='first' href='#'>First</a> <a href='#'>1</a> <a href='#'>2</a> <a …
354 css-float  center  css 
6
向左飘浮; vs display：inline; vs display：inline-block; vs display：table-cell;
我的问题 这些方法中的任何一种是否是专业的网页设计师所偏爱的？ 绘制网站时，Web浏览器是否会首选这些方法？ 这仅仅是个人喜好吗？ 我还缺少其他技巧吗？ 注意：以上问题与设计多列布局有关 向左飘浮; http://jsfiddle.net/CDe6a/ 这是我在创建列布局时始终使用的方法，并且似乎工作得很好。父母确实会自己崩溃，所以您只需要记住clear:both;之后即可。我刚刚发现的另一个缺点是无法垂直对齐文本。 显示：内联； 这似乎可以解决父项崩溃的问题，但是增加了空格。 http://jsfiddle.net/CDe6a/1/ 从html删除空格似乎是解决此问题的最简单方法，但是如果您对HTML确实很挑剔，则不希望这样做。 http://jsfiddle.net/CDe6a/2/ 显示：行内块； 看起来完全像display:inline;。 http://jsfiddle.net/CDe6a/3/ 显示：表格单元格； http://jsfiddle.net/CDe6a/4/ 完美的作品。 我的想法： 我确定我会遗漏很多东西，例如某些会破坏布局的异常，但display:table-cell;似乎效果最好，而且我想我会像以往一样float:left;总是开始搞砸，因此我将开始替换它们clear:both;。我已经在网络上阅读了许多有关此的文章和博客，但是没有一篇文章给我明确的答案，说明我在布局网站时应使用的内容。
281 html  css  css-float 
10
div中的浮动元素，在div之外浮动。为什么？
假设您有一个div，给它一个定值width，然后在其中添加元素，在我的情况下为img另一个div。 这个想法是容器的内容div将导致容器div伸展，并成为内容的背景。但是，当我这样做时，容纳物会div收缩以适合非漂浮的物体，并且漂浮的物体将一直伸出，或者一半伸出，一半进入，并且对big的大小没有任何影响div。 为什么是这样？有什么我想念的东西，怎么才能让漂浮的物品伸出height其中的东西div呢？
274 css  html  css-float 
15
如何使用CSS并排浮动3个div？
我知道如何使2个div并排漂浮，只需将一个div漂浮在左侧，另一个就漂浮在右侧。 但是如何使用3个div来做到这一点呢？或者我应该只为此使用表格？
270 css  css-float 
10
如何使CSS浮动在一行中？
我想在同一行上使用两个项目float: left作为左侧的项目。 我没有任何问题可以单独实现。问题是，即使您将浏览器的尺寸调整得非常小，我也希望这两项保持同一行。您知道...就像桌子一样。 我们的目标是无论包裹在右边，都不会包裹物品。 如何使用CSS告诉浏览器，我宁愿拉伸包含内容而div不是包装内容，因此float: right;div在float: left; div？之下？ 我想要的是： \ +---------------+ +------------------------/ | float: left; | | float: right; \ | | | / | | |content stretching \ Screen Edge | | |the div off the screen / <--- +---------------+ +------------------------\ /
7
如果容器元素包含浮动元素，为什么高度不增加？
我想问一下高度和浮球的工作原理。我有一个外部div和一个内部div，其中包含内容。它的高度可能取决于内部div的内容，但似乎我的内部div会溢出其外部div。正确的做法是什么？ <html> <body> <div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange"> <div style="width:500px; height:200px; background-color:black; float:right"></div> </div> </body> </html> 运行代码段隐藏结果展开摘要
210 html  css  css-float 
8
如何创建网格/平铺视图？
例如，我有一些.article类，并且我想将该类作为网格视图进行查看。所以我采用了这种风格： .article{ width:100px; height:100px; background:#333; float:left; margin:5px; } 这种样式将使.article看起来平铺/网格化。固定高度可以正常工作。但是，如果我要将高度设置为自动（根据其中的数据自动拉伸），则网格看起来很讨厌。 我想要这样的视图：
5
在CSS中使用display：inline-block与float：left的优点
通常，当我们想DIVs连续拥有多个时，可以使用float: left，但是现在我发现了display:inline-block 示例链接在这里。在我看来，这display:inline-block是一种更好align DIVs的连续方式，但是有什么缺点吗？为什么这种方法不那么流行float呢？
127 css  css-float  html 
5
浮动权利和绝对位置不能同时使用
我希望div始终位于其父div的右侧，因此我使用float:right。有用。 但是我也希望它在插入时不影响其他内容，所以我使用position:absolute。 现在float:right不起作用，我的div始终位于其父div的左侧。如何将其向右移动？
125 css  css-float  position 
8
将DIV堆叠在一起？
是否可以堆叠多个DIV，例如： <div> <div></div> <div></div> <div></div> <div></div> </div> 这样所有这些内部DIV都具有相同的X和Y位置？默认情况下，它们都相互降低，从而将Y位置增加最后一个上一个DIV的高度。 我感觉某种漂浮物或展示物或其他技巧可能会咬人？ 编辑：父DIV具有相对位置，因此，使用绝对位置似乎不起作用。
115 css  html  stack  css-float 
11
如何使没有内容的div有宽度？
我正在尝试为加上宽度div，但由于没有内容，因此我似乎遇到了问题。 这是到目前为止我拥有的CSS和HTML，但无法正常工作： 的CSS body{ margin:0 auto; width:1000px } ul{ width:800px; } ul li{ clear:both; } .test1{ width:200px; float:left; } 的HTML <body> <div id="test"> <ul> <li> <div class="test1">width1</div> <div class="test1">width2</div> <div class="test1">width3</div> </li> <li> <div class="test1"></div> <div class="test1">width2</div> <div class="test1">width3</div> </li> <li> <div class="test1"></div> <div class="test1">width2</div> <div class="test1">width3</div> </li> </ul> </div>
110 html  css  width  css-float 
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.